@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 400;
  src: local("Inconsolata"), local("Inconsolata-Regular");
  src: url("fonts/Inconsolata-Regular.ttf.ttf") format("truetype");
}
@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 700;
  src: local("Inconsolata"), local("Inconsolata-Bold");
  src: url("fonts/Inconsolata-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  src: local("PT Sans"), local("PTSans-Regular");
  src: url("fonts/PTSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 400;
  src: local("PT Sans"), local("PTSans-Italic");
  src: url("fonts/PTSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans";
  font-style: italic;
  font-weight: 700;
  src: local("PT Sans"), local("PTSans-BoldItalic");
  src: url("fonts/PTSans-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  src: local("PT Sans"), local("PTSans-Bold");
  src: url("fonts/PTSans-Bold.ttf") format("truetype");
}
:root {
  --font-size: 16px;
  --font-size-small: 14px;
  --font-size-code: 14px;
}
@media (min-width: 600px) {
  :root {
    --font-size: 18px;
    --font-size-small: 16px;
    --font-size-code: 16px;
  }
}

[data-theme=light],
:root:not([data-theme=dark], [data-theme=sand-dark]) {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --primary-active: #c2410c;
  --primary-focus: var(--primary);
  --primary-inverse: #fff;
  --secondary: #ffedd5;
  --secondary-hover: #fed7aa;
  --secondary-active: #fdba74;
  --secondary-focus: var(--secondary);
  --secondary-inverse: #9a3412;
  --accent: #ec4899;
  --accent-hover: #db2777;
  --accent-active: #be185d;
  --accent-focus: var(--accent);
  --accent-inverse: #fff;
  --accent-secondary: #fce7f3;
  --accent-secondary-hover: #fbcfe8;
  --accent-secondary-active: #f9a8d4;
  --accent-secondary-focus: var(--accent);
  --accent-secondary-inverse: #9d174d;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-active: #b91c1c;
  --danger-focus: #ef4444;
  --danger-inverse: #fff;
  --danger-secondary: #fecaca;
  --danger-secondary-inverse: #7f1d1d;
  --danger-secondary-hover: #fca5a5;
  --danger-secondary-active: #f87171;
  --success: #00895a;
  --success-hover: #006d46;
  --success-active: #015234;
  --success-focus: #00895a;
  --success-inverse: #fff;
  --success-secondary: #39f1a6;
  --success-secondary-inverse: #033823;
  --success-secondary-hover: #21e299;
  --success-secondary-active: #00c482;
  --neutral: hsl(0, 0%, 90%);
  --neutral-hover: hsl(0, 0%, 83%);
  --neutral-active: hsl(0, 0%, 64%);
  --neutral-secondary: #fff;
  --background-color: hsl(0, 0%, 96%);
  --color: hsl(0, 0%, 25%);
  --color-secondary: hsl(0, 0%, 32%);
  --color-tertiary: hsl(0, 0%, 45%);
  --color-error: #ec4899;
  --h1-color: #000;
  --h2-color: hsl(0, 0%, 4%);
  --h3-color: hsl(0, 0%, 9%);
  --h4-color: hsl(0, 0%, 15%);
  --h5-color: hsl(0, 0%, 25%);
  --h6-color: hsl(0, 0%, 32%);
  --border-color: hsl(0, 0%, 83%);
  --link-color: var(--primary);
  --link-color-visited: var(--primary-hover);
  --link-color-active: var(--primary-active);
  --link-color-focus: var(--primary-focus);
  --link-color-hover: var(--primary-hover);
  --ins-color: #00895a;
  --del-color: var(--danger);
  --selection-color: #fed7aa;
  --header-background-color: hsl(0, 0%, 90%);
  --header-border-color: var(--border-color);
  --footer-background-color: hsl(0, 0%, 90%);
  --form-background-color: #fff;
  --form-background-color-active: #fff;
  --form-background-color-focus: var(--primary);
  --form-background-color-focus-shadow: #fed7aa;
  --form-background-color-disabled: hsl(0, 0%, 90%);
  --form-border-color: var(--border-color);
  --form-border-color-disabled: hsl(0, 0%, 64%);
  --form-color: var(--color-secondary);
  --form-color-placeholder: var(--color-tertiary);
  --code-background-color: hsl(0, 0%, 90%);
  --code-color: hsl(0, 0%, 25%);
  --code-background-color-kbd: hsl(0, 0%, 25%);
  --code-color-kbd: hsl(0, 0%, 96%);
  --mark-background-color: #fed7aa;
  --blockquote-border-color: var(--border-color);
  --table-striped-background-color: hsl(0, 0%, 90%);
  --dialog-background-color: #fff;
  --dropdown-background-color: #fff;
  --dropdown-background-color-hover: hsl(0, 0%, 98%);
  --dropdown-background-color-active: hsl(0, 0%, 96%);
  --card-background-color: #fff;
  --card-background-color-variant: hsl(0, 0%, 98%);
  --card-border-color: hsl(0, 0%, 90%);
  --tooltip-background-color: hsl(0, 0%, 15%);
  --tooltip-color: hsl(0, 0%, 90%);
  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 64, 64)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(157, 23, 77)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 64, 64)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 64, 64)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 64, 64)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -8 24 24' width='24' height='24' fill='rgb(64, 64, 64)'%3E%3Cpath d='m7.071 5.314 4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z'/%3E%3C/svg%3E");
  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -7 24 24' width='24' height='24' fill='rgb(255, 255, 255)'%3E%3Cpath d='M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: #ea580c;
    --primary-hover: #c2410c;
    --primary-active: #9a3412;
    --primary-focus: var(--primary);
    --primary-inverse: #fff;
    --secondary: rgba(249, 115, 22, 0.1);
    --secondary-hover: rgba(234, 88, 12, 0.1);
    --secondary-active: rgba(194, 65, 12, 0.1);
    --secondary-focus: var(--secondary);
    --secondary-inverse: #fb923c;
    --accent: #ec4899;
    --accent-hover: #db2777;
    --accent-active: #be185d;
    --accent-focus: var(--accent);
    --accent-inverse: #fff;
    --accent-secondary: rgba(236, 72, 153, 0.1);
    --accent-secondary-hover: rgba(219, 39, 119, 0.1);
    --accent-secondary-active: rgba(190, 24, 93, 0.1);
    --accent-secondary-focus: var(--accent);
    --accent-secondary-inverse: #f472b6;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-active: #991b1b;
    --danger-focus: #dc2626;
    --danger-inverse: #fff;
    --danger-secondary-hover: rgba(220, 38, 38, 0.1);
    --danger-secondary-active: rgba(185, 28, 28, 0.1);
    --danger-secondary: rgba(239, 68, 68, 0.1);
    --danger-secondary-inverse: #f87171;
    --success: #006d46;
    --success-hover: #015234;
    --success-active: #033823;
    --success-focus: #006d46;
    --success-inverse: #fff;
    --success-secondary: rgba(0, 137, 90, 0.1);
    --success-secondary-inverse: #00a66e;
    --success-secondary-hover: rgba(0, 109, 70, 0.1);
    --success-secondary-active: rgba(1, 82, 52, 0.1);
    --neutral: rgba(229.5, 229.5, 229.5, 0.1);
    --neutral-hover: rgba(229.5, 229.5, 229.5, 0.07);
    --neutral-active: rgba(229.5, 229.5, 229.5, 0.04);
    --neutral-secondary: hsl(0, 0%, 25%);
    --background-color: hsl(0, 0%, 15%);
    --color: hsl(0, 0%, 83%);
    --color-secondary: hsl(0, 0%, 64%);
    --color-tertiary: hsl(0, 0%, 45%);
    --color-error: #ec4899;
    --h1-color: hsl(0, 0%, 96%);
    --h2-color: hsl(0, 0%, 96%);
    --h3-color: hsl(0, 0%, 90%);
    --h4-color: hsl(0, 0%, 90%);
    --h5-color: hsl(0, 0%, 83%);
    --h6-color: hsl(0, 0%, 64%);
    --border-color: hsl(0, 0%, 25%);
    --link-color: var(--primary);
    --link-color-visited: var(--primary-hover);
    --link-color-active: var(--primary-active);
    --link-color-focus: var(--primary-focus);
    --link-color-hover: var(--primary-hover);
    --ins-color: var(--success);
    --del-color: var(--danger);
    --selection-color: #9a3412;
    --header-background-color: hsl(0, 0%, 25%);
    --header-border-color: hsl(0, 0%, 15%);
    --footer-background-color: hsl(0, 0%, 9%);
    --form-background-color: hsl(0, 0%, 25%);
    --form-background-color-active: hsl(0, 0%, 32%);
    --form-background-color-focus: var(--primary);
    --form-background-color-focus-shadow: #7c2d12;
    --form-background-color-disabled: hsl(0, 0%, 15%);
    --form-border-color: hsl(0, 0%, 15%);
    --form-border-color-disabled: hsl(0, 0%, 32%);
    --form-color: hsl(0, 0%, 83%);
    --form-color-placeholder: hsl(0, 0%, 64%);
    --code-background-color: hsl(0, 0%, 9%);
    --code-color: hsl(0, 0%, 64%);
    --code-background-color-kbd: hsl(0, 0%, 9%);
    --code-color-kbd: hsl(0, 0%, 90%);
    --mark-background-color: #fdba74;
    --blockquote-border-color: var(--border-color);
    --table-striped-background-color: hsl(0, 0%, 9%);
    --dialog-background-color: hsl(0, 0%, 25%);
    --dropdown-background-color: hsl(0, 0%, 45%);
    --dropdown-background-color-hover: hsl(0, 0%, 32%);
    --dropdown-background-color-active: hsl(0, 0%, 25%);
    --card-background-color: hsl(0, 0%, 25%);
    --card-background-color-variant: hsl(0, 0%, 32%);
    --card-border-color: hsl(0, 0%, 32%);
    --lightbox-background-color: hsl(0, 0%, 9%);
    --lightbox-overlay-background-color: hsla(0, 0%, 9%, 0.4);
    --tooltip-background-color: hsl(0, 0%, 90%);
    --tooltip-color: hsl(0, 0%, 15%);
    --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(251, 207, 232)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -8 24 24' width='24' height='24' fill='rgb(212, 212, 212)'%3E%3Cpath d='m7.071 5.314 4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z'/%3E%3C/svg%3E");
    --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -7 24 24' width='24' height='24' fill='rgb(0, 0, 0)'%3E%3Cpath d='M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
[data-theme=dark] {
  --primary: #ea580c;
  --primary-hover: #c2410c;
  --primary-active: #9a3412;
  --primary-focus: var(--primary);
  --primary-inverse: #fff;
  --secondary: rgba(249, 115, 22, 0.1);
  --secondary-hover: rgba(234, 88, 12, 0.1);
  --secondary-active: rgba(194, 65, 12, 0.1);
  --secondary-focus: var(--secondary);
  --secondary-inverse: #fb923c;
  --accent: #ec4899;
  --accent-hover: #db2777;
  --accent-active: #be185d;
  --accent-focus: var(--accent);
  --accent-inverse: #fff;
  --accent-secondary: rgba(236, 72, 153, 0.1);
  --accent-secondary-hover: rgba(219, 39, 119, 0.1);
  --accent-secondary-active: rgba(190, 24, 93, 0.1);
  --accent-secondary-focus: var(--accent);
  --accent-secondary-inverse: #f472b6;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-active: #991b1b;
  --danger-focus: #dc2626;
  --danger-inverse: #fff;
  --danger-secondary-hover: rgba(220, 38, 38, 0.1);
  --danger-secondary-active: rgba(185, 28, 28, 0.1);
  --danger-secondary: rgba(239, 68, 68, 0.1);
  --danger-secondary-inverse: #f87171;
  --success: #006d46;
  --success-hover: #015234;
  --success-active: #033823;
  --success-focus: #006d46;
  --success-inverse: #fff;
  --success-secondary: rgba(0, 137, 90, 0.1);
  --success-secondary-inverse: #00a66e;
  --success-secondary-hover: rgba(0, 109, 70, 0.1);
  --success-secondary-active: rgba(1, 82, 52, 0.1);
  --neutral: rgba(229.5, 229.5, 229.5, 0.1);
  --neutral-hover: rgba(229.5, 229.5, 229.5, 0.07);
  --neutral-active: rgba(229.5, 229.5, 229.5, 0.04);
  --neutral-secondary: hsl(0, 0%, 25%);
  --background-color: hsl(0, 0%, 15%);
  --color: hsl(0, 0%, 83%);
  --color-secondary: hsl(0, 0%, 64%);
  --color-tertiary: hsl(0, 0%, 45%);
  --color-error: #ec4899;
  --h1-color: hsl(0, 0%, 96%);
  --h2-color: hsl(0, 0%, 96%);
  --h3-color: hsl(0, 0%, 90%);
  --h4-color: hsl(0, 0%, 90%);
  --h5-color: hsl(0, 0%, 83%);
  --h6-color: hsl(0, 0%, 64%);
  --border-color: hsl(0, 0%, 25%);
  --link-color: var(--primary);
  --link-color-visited: var(--primary-hover);
  --link-color-active: var(--primary-active);
  --link-color-focus: var(--primary-focus);
  --link-color-hover: var(--primary-hover);
  --ins-color: var(--success);
  --del-color: var(--danger);
  --selection-color: #9a3412;
  --header-background-color: hsl(0, 0%, 25%);
  --header-border-color: hsl(0, 0%, 15%);
  --footer-background-color: hsl(0, 0%, 9%);
  --form-background-color: hsl(0, 0%, 25%);
  --form-background-color-active: hsl(0, 0%, 32%);
  --form-background-color-focus: var(--primary);
  --form-background-color-focus-shadow: #7c2d12;
  --form-background-color-disabled: hsl(0, 0%, 15%);
  --form-border-color: hsl(0, 0%, 15%);
  --form-border-color-disabled: hsl(0, 0%, 32%);
  --form-color: hsl(0, 0%, 83%);
  --form-color-placeholder: hsl(0, 0%, 64%);
  --code-background-color: hsl(0, 0%, 9%);
  --code-color: hsl(0, 0%, 64%);
  --code-background-color-kbd: hsl(0, 0%, 9%);
  --code-color-kbd: hsl(0, 0%, 90%);
  --mark-background-color: #fdba74;
  --blockquote-border-color: var(--border-color);
  --table-striped-background-color: hsl(0, 0%, 9%);
  --dialog-background-color: hsl(0, 0%, 25%);
  --dropdown-background-color: hsl(0, 0%, 45%);
  --dropdown-background-color-hover: hsl(0, 0%, 32%);
  --dropdown-background-color-active: hsl(0, 0%, 25%);
  --card-background-color: hsl(0, 0%, 25%);
  --card-background-color-variant: hsl(0, 0%, 32%);
  --card-border-color: hsl(0, 0%, 32%);
  --lightbox-background-color: hsl(0, 0%, 9%);
  --lightbox-overlay-background-color: hsla(0, 0%, 9%, 0.4);
  --tooltip-background-color: hsl(0, 0%, 90%);
  --tooltip-color: hsl(0, 0%, 15%);
  --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 115, 115)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(251, 207, 232)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(212, 212, 212)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -8 24 24' width='24' height='24' fill='rgb(212, 212, 212)'%3E%3Cpath d='m7.071 5.314 4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z'/%3E%3C/svg%3E");
  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -7 24 24' width='24' height='24' fill='rgb(0, 0, 0)'%3E%3Cpath d='M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

[data-theme=sand-dark] {
  --primary: #d24317;
  --primary-hover: #7f270b;
  --primary-active: #561e0a;
  --primary-focus: var(--primary);
  --primary-inverse: #fff;
  --secondary: #d92662;
  --secondary-hover: #b21e4f;
  --secondary-active: #88143b;
  --secondary-focus: var(--secondary);
  --secondary-inverse: #fff;
  --background-color: #272622;
  --color: #e8e2d2;
  --color-secondary: #dad4c2;
  --color-tertiary: #ccc6b4;
  --color-error: #d92662;
  --h1-color: #fff;
  --h2-color: #fff;
  --h3-color: #f2f0ec;
  --h4-color: #f2f0ec;
  --h5-color: #e8e2d2;
  --h6-color: #e8e2d2;
  --border-color: #3d3b35;
  --link-color: var(--primary);
  --link-color-visited: var(--primary-hover);
  --link-color-active: var(--primary-active);
  --link-color-focus: var(--primary-focus);
  --link-color-hover: var(--primary-hover);
  --ins-color: #4b864b;
  --del-color: var(--color-error);
  --selection-color: #561e0a;
  --header-background-color: #49463f;
  --header-border-color: #32302b;
  --footer-background-color: #1c1b19;
  --form-background-color: #49463f;
  --form-background-color-active: #615e55;
  --form-background-color-focus: var(--primary);
  --form-background-color-disabled: #32302b;
  --form-border-color: var(--border-color);
  --form-border-color-disabled: #615e55;
  --form-color: #b0ab9b;
  --form-color-placeholder: #959082;
  --code-background-color: #1c1b19;
  --code-color: #959082;
  --code-background-color-kbd: #1c1b19;
  --code-color-kbd: #ccc6b4;
  --mark-background-color: #f68e68;
  --blockquote-border-color: var(--border-color);
  --table-striped-background-color: #1c1b19;
  --dialog-background-color: #49463f;
  --dropdown-background-color: #7b776b;
  --dropdown-background-color-hover: #615e55;
  --dropdown-background-color-active: #49463f;
  --card-background-color: #55524a;
  --lightbox-background-color: #1c1b19;
  --lightbox-overlay-background-color: hsla(0, 0%, 9%, 0.4);
}

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: "PT Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
  tab-size: 4; /* 3 */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/
/**
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)
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: Inconsolata, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
/**
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;
}

/*
Tabular data
============
*/
/**
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 Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.5;
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: none;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/*! sanitize v13.0.0 |  CC0-1.0 license  | https://github.com/csstools/sanitize.css */
/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
* Remove the border on iframes in all browsers (opinionated).
*/
:where(iframe) {
  border-style: none;
}

/**
* Change the fill color to match the text color in all browsers (opinionated).
*/
:where(svg:not([fill])) {
  fill: currentColor;
}

:root {
  font-size: var(--font-size);
  font-weight: 400;
  border-radius: 0.5rem;
  border-width: 1px;
  outline-width: 2px;
  background-color: var(--background-color);
  color: var(--color);
  padding: 0;
  margin: 0;
}

address,
blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--color);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "PT Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: var(--font-size);
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.5rem;
}

hgroup,
.headings {
  margin-bottom: 1.5rem;
}
hgroup > *,
.headings > * {
  margin-bottom: 0;
}
hgroup > *:last-child,
.headings > *:last-child {
  color: var(--color-secondary);
  font-weight: unset;
  font-size: 1rem;
  font-family: unset;
}

:where(a:not([role=button], [role=link]:not([role=button]))) {
  color: var(--link-color);
  text-decoration: none;
  font-weight: bold;
}
:where(a:not([role=button], [role=link]:not([role=button]))):visited {
  color: var(--link-color-visited);
}
:where(a:not([role=button], [role=link]:not([role=button]))):focus {
  color: var(--link-color-focus);
}
:where(a:not([role=button], [role=link]:not([role=button]))):hover {
  color: var(--link-color-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
:where(a:not([role=button], [role=link]:not([role=button]))):active {
  color: var(--link-color-active);
}
:where(a:not([role=button], [role=link]:not([role=button]))).secondary {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}
:where(a:not([role=button], [role=link]:not([role=button]))).secondary:not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
:where(a:not([role=button], [role=link]:not([role=button]))).secondary svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
:where(a:not([role=button], [role=link]:not([role=button]))).tertiary {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
  font-weight: inherit;
}
:where(a:not([role=button], [role=link]:not([role=button]))).tertiary:not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
:where(a:not([role=button], [role=link]:not([role=button]))).tertiary svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
:where(a:not([role=button], [role=link]:not([role=button]))).tertiary:is([aria-current], :hover, :active, :focus, :visited) {
  font-weight: inherit;
}
:where(a:not([role=button], [role=link]:not([role=button]))).accent {
  color: var(--accent);
}
:where(a:not([role=button], [role=link]:not([role=button]))).accent:visited {
  color: var(--accent);
}
:where(a:not([role=button], [role=link]:not([role=button]))).accent:focus {
  color: var(--accent-focus);
}
:where(a:not([role=button], [role=link]:not([role=button]))).accent:hover {
  color: var(--accent-hover);
}
:where(a:not([role=button], [role=link]:not([role=button]))).accent:active {
  color: var(--accent-active);
}

:where(dl, ol, ul) {
  padding-right: 0;
  padding-left: 1.5rem;
}
:where(dl, ol, ul) li {
  margin-bottom: 0.375rem;
}

dl dt {
  font-weight: bold;
  margin-bottom: 0.375rem;
}
dl dd {
  margin-left: 0;
  margin-bottom: 1.5rem;
}

:where(dl, ol, ul) :is(dl, ol, ul) {
  margin: 0;
  margin-top: 0.375rem;
}

blockquote {
  display: block;
  margin: 1.5rem 0;
  padding: 1rem;
  border-right: none;
  border-left: 0.25rem solid var(--blockquote-border-color);
}
blockquote footer {
  margin-top: 0.75rem;
  color: var(--color-secondary);
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}

ins {
  color: var(--ins-color);
}

del {
  color: var(--del-color);
}

::selection {
  background-color: var(--selection-color);
}

mark {
  border-radius: 0.5rem;
  background-color: var(--mark-background-color);
}

pre,
code,
kbd,
samp {
  border-radius: 0.5rem;
  background-color: var(--code-background-color);
  color: var(--code-color);
  font-weight: 400;
  line-height: initial;
  font-size: var(--font-size-code);
}

code,
kbd,
samp,
mark {
  display: inline;
  padding: 0.125rem 0.375rem;
}

pre {
  display: block;
  margin-bottom: 2rem;
  overflow-x: auto;
  padding: 1rem;
  line-height: 1.5;
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
pre > :is(code, samp) {
  display: block;
  background: none;
}

kbd {
  background-color: var(--code-background-color-kbd);
  color: var(--code-color-kbd);
  vertical-align: baseline;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

dialog {
  border: 1px solid var(--form-border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  color: inherit;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--background-color);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--color);
  font-weight: 400;
  font-size: var(--font-size);
  text-align: left;
  text-align: start;
}
th button,
td button {
  margin: 0;
}

tfoot th,
tfoot td {
  border-bottom: 0;
}

th,
tfoot :is(td, th) {
  font-weight: bold;
}

table caption {
  font-size: var(--font-size-small);
  font-style: italic;
  color: var(--color-secondary);
  margin-bottom: -0.375rem;
}

table.striped tbody tr:nth-child(odd) {
  background-color: var(--table-striped-background-color);
}

figcaption {
  font-size: var(--font-size-small);
  font-style: italic;
  color: var(--color-secondary);
}

small {
  color: var(--color-secondary);
  font-size: var(--font-size-small);
}

input:not([type=checkbox], [type=radio], [type=range]) {
  height: calc(2.75rem + 2px);
}
input:not([type=checkbox], [type=radio], [type=range]).small {
  height: auto;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  margin-bottom: 2rem;
}

label,
fieldset legend {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

:is(input[type=checkbox], input[type=radio]) ~ label {
  display: inline-block;
  margin-left: 0.75rem;
}

input:not([type=checkbox], [type=radio], [type=color]),
select,
textarea {
  width: 100%;
}

input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]),
select,
textarea {
  appearance: none;
  padding: 0.625rem 1rem;
}
input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]).small,
select.small,
textarea.small {
  padding: 0.25rem 0.625rem;
}

:where(input, select, textarea) {
  background-color: var(--form-background-color);
  border: 1px solid var(--form-border-color);
  border-radius: 0.5rem;
  color: var(--form-color);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 400;
  outline: none;
}

input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
  background-color: var(--form-background-color-active);
}

input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [role=switch], [readonly]):is(:active, :focus),
:where(select, textarea):is(:active, :focus) {
  border-color: var(--form-background-color-active);
}

input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [type=checkbox], [type=radio], [readonly]):focus,
select:focus,
textarea:focus {
  border-color: var(--form-background-color-focus);
  box-shadow: inset 0 0 0 2px var(--form-background-color-focus);
}

input:not([type=submit], [type=button], [type=reset])[disabled],
select[disabled],
textarea[disabled],
:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
  background-color: var(--form-background-color-disabled);
  border-color: var(--form-border-color-disabled);
  opacity: 0.5;
  pointer-events: none;
}

input::placeholder,
textarea::placeholder,
select:invalid {
  color: var(--form-color-placeholder);
  opacity: 1;
}

input:not([type=checkbox], [type=radio]),
select,
textarea {
  margin-bottom: 1rem;
}

select:not([multiple], [size]),
.fake-select {
  background-image: var(--icon-chevron);
  background-position: center right 1rem;
  background-size: 1.125rem;
  background-repeat: no-repeat;
}

:where(input, select, textarea) + small {
  display: block;
  width: 100%;
  margin-top: -0.75rem;
  margin-bottom: 1rem;
  color: var(--color-tertiary);
}

label > :where(input, select, textarea) {
  margin-top: 0.25rem;
}

[type=checkbox],
[type=radio] {
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  cursor: pointer;
  font-size: inherit;
  vertical-align: middle;
  margin-top: -0.25em;
  margin-left: 0;
  margin-inline-start: 0;
  margin-inline-end: 0.375em;
  border-width: 1px;
  font-size: inherit;
  vertical-align: middle;
}
[type=checkbox]:focus,
[type=radio]:focus {
  border-color: var(--form-background-color-focus);
  box-shadow: 0 0 0 2px var(--form-background-color-focus-shadow);
}
[type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus,
[type=radio]:checked,
[type=radio]:checked:active,
[type=radio]:checked:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: var(--icon-checkbox);
  background-position: center;
  background-repeat: no-repeat;
}
[type=checkbox] ~ label,
[type=radio] ~ label {
  display: inline-block;
  margin-right: 0.375em;
  margin-bottom: 0;
  cursor: pointer;
}

[type=checkbox] {
  border-radius: min(4px, 0.5rem);
}
[type=checkbox]:indeterminate {
  background-color: var(--primary);
  border-color: var(--primary);
}

[type=radio] {
  border-radius: 50%;
}
[type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus {
  background-color: var(--primary-inverse);
  border-width: 0.35em;
  background-image: none;
}

progress,
[type=checkbox],
[type=radio],
[type=range] {
  accent-color: var(--primary);
}

.input-group,
.group {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.input-group *,
.group * {
  border-radius: 0;
}
.input-group :last-child,
.group :last-child {
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.input-group :first-child,
.group :first-child {
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}
.input-group button,
.input-group input[type=submit],
.group button,
.group input[type=submit] {
  width: unset;
}
.input-group button,
.input-group input,
.input-group select,
.group button,
.group input,
.group select {
  margin: 0;
}

form p {
  margin: 0;
}

.fake-select,
.fake-input {
  color: var(--form-color-placeholder);
  padding: 0.625rem 1rem;
  background-color: var(--form-background-color);
  border: 1px solid var(--form-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 400;
  outline: none;
  margin-bottom: 1rem;
  width: 100%;
}
.fake-select.small,
.fake-input.small {
  padding: 0.25rem 0.625rem;
}
.fake-select:is(:active, :focus),
.fake-input:is(:active, :focus) {
  background-color: var(--form-background-color-active);
}
.fake-select:focus,
.fake-input:focus {
  border-color: var(--form-background-color-focus);
  box-shadow: inset 0 0 0 2px var(--form-background-color-focus);
}
.fake-select:hover,
.fake-input:hover {
  cursor: pointer;
}

button {
  margin-bottom: 1rem;
  display: block;
  width: 100%;
}

[role=button] {
  display: inline-block;
  text-decoration: none;
}

:where(button, input[type=submit], input[type=button], input[type=reset], [role=button]) {
  background-color: var(--primary);
  color: var(--primary-inverse);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 0.625rem 1rem;
  border: 1px solid var(--primary);
  border-radius: 0.5rem;
  outline: none;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
}
:where(button, input[type=submit], input[type=button], input[type=reset], [role=button]):focus {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}
:where(button, input[type=submit], input[type=button], input[type=reset], [role=button]):is([aria-current], :hover) {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
}
:where(button, input[type=submit], input[type=button], input[type=reset], [role=button]):active {
  background-color: var(--primary-active);
  border-color: var(--primary-active);
}
:where(button, input[type=submit], input[type=button], input[type=reset], [role=button]).small {
  padding: 0.25rem 0.625rem;
}

:is(button, input[type=submit], input[type=button], [role=button]).secondary,
:is(button, input[type=submit], input[type=button], [role=button]).neutral {
  background-color: var(--secondary);
  color: var(--secondary-inverse);
  border-color: var(--secondary);
}
:is(button, input[type=submit], input[type=button], [role=button]).secondary:is(:focus, [aria-current], :hover),
:is(button, input[type=submit], input[type=button], [role=button]).neutral:is(:focus, [aria-current], :hover) {
  background-color: var(--secondary-hover);
  border-color: var(--secondary-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).secondary:active,
:is(button, input[type=submit], input[type=button], [role=button]).neutral:active {
  background-color: var(--secondary-active);
  border-color: var(--secondary-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).accent,
input[type=reset] {
  background-color: var(--accent);
  color: var(--accent-inverse);
  border-color: var(--accent);
}
:is(button, input[type=submit], input[type=button], [role=button]).accent:focus,
input[type=reset]:focus {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).accent:is([aria-current], :hover),
input[type=reset]:is([aria-current], :hover) {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).accent:active,
input[type=reset]:active {
  background-color: var(--accent-active);
  border-color: var(--accent-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).accent.secondary {
  background-color: var(--accent-secondary);
  color: var(--accent-secondary-inverse);
  border-color: var(--accent-secondary);
}
:is(button, input[type=submit], input[type=button], [role=button]).accent.secondary:is(:focus, [aria-current], :hover) {
  background-color: var(--accent-secondary-hover);
  border-color: var(--accent-secondary-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).accent.secondary:active {
  background-color: var(--accent-secondary-active);
  border-color: var(--accent-secondary-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).danger,
:is(button, input[type=submit], input[type=button], [role=button]).failure {
  background-color: var(--danger);
  color: var(--danger-inverse);
  border-color: var(--danger);
}
:is(button, input[type=submit], input[type=button], [role=button]).danger:is(:focus, [aria-current], :hover),
:is(button, input[type=submit], input[type=button], [role=button]).failure:is(:focus, [aria-current], :hover) {
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).danger:active,
:is(button, input[type=submit], input[type=button], [role=button]).failure:active {
  background-color: var(--danger-active);
  border-color: var(--danger-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).danger.secondary,
:is(button, input[type=submit], input[type=button], [role=button]).failure.secondary {
  background-color: var(--danger-secondary);
  color: var(--danger-secondary-inverse);
  border-color: var(--danger-secondary);
}
:is(button, input[type=submit], input[type=button], [role=button]).danger.secondary:is(:focus, [aria-current], :hover),
:is(button, input[type=submit], input[type=button], [role=button]).failure.secondary:is(:focus, [aria-current], :hover) {
  background-color: var(--danger-secondary-hover);
  border-color: var(--danger-secondary-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).danger.secondary:active,
:is(button, input[type=submit], input[type=button], [role=button]).failure.secondary:active {
  background-color: var(--danger-secondary-active);
  border-color: var(--danger-secondary-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).success {
  background-color: var(--success);
  color: var(--success-inverse);
  border-color: var(--success);
}
:is(button, input[type=submit], input[type=button], [role=button]).success:is(:focus, [aria-current], :hover) {
  background-color: var(--success-hover);
  border-color: var(--success-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).success:active {
  background-color: var(--success-active);
  border-color: var(--success-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).success.secondary {
  background-color: var(--success-secondary);
  color: var(--success-secondary-inverse);
  border-color: var(--success-secondary);
}
:is(button, input[type=submit], input[type=button], [role=button]).success.secondary:is(:focus, [aria-current], :hover) {
  background-color: var(--success-secondary-hover);
  border-color: var(--success-secondary-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).success.secondary:active {
  background-color: var(--success-secondary-active);
  border-color: var(--success-secondary-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).tertiary {
  background-color: transparent;
  color: var(--primary);
  border-color: transparent;
  box-shadow: none;
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary:is(:focus, [aria-current], :hover) {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary:active {
  background-color: transparent;
  border-color: transparent;
  color: var(--primary-active);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.small {
  padding-inline: 0.625rem;
  padding-block: 0.25rem;
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.accent {
  color: var(--accent);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.accent:is(:focus, [aria-current], :hover) {
  color: var(--accent-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.accent:active {
  color: var(--accent-active);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.danger, :is(button, input[type=submit], input[type=button], [role=button]).tertiary.failure {
  color: var(--danger);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.danger:is(:focus, [aria-current], :hover), :is(button, input[type=submit], input[type=button], [role=button]).tertiary.failure:is(:focus, [aria-current], :hover) {
  color: var(--danger-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.danger:active, :is(button, input[type=submit], input[type=button], [role=button]).tertiary.failure:active {
  color: var(--danger-active);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.success {
  color: var(--success);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.success:is(:focus, [aria-current], :hover) {
  color: var(--success-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).tertiary.success:active {
  color: var(--success-active);
}

:is(button, input[type=submit], input[type=button], [role=button]).outline,
input[type=reset].outline {
  background-color: transparent;
  color: var(--primary);
  border-width: 2px;
  padding-inline: calc(1rem - 2px + 1px);
  padding-block: calc(0.625rem - 2px + 1px);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline:is(:focus, [aria-current], :hover),
input[type=reset].outline:is(:focus, [aria-current], :hover) {
  background-color: transparent;
  border-color: var(--primary-hover);
  color: var(--primary-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline:active,
input[type=reset].outline:active {
  background-color: transparent;
  border-color: var(--primary-active);
  color: var(--primary-active);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline.small,
input[type=reset].outline.small {
  padding-inline: calc(0.625rem - 2px + 1px);
  padding-block: calc(0.25rem - 2px + 1px);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline.accent,
input[type=reset].outline.accent {
  color: var(--accent);
  border-color: var(--accent);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline.accent:is(:focus, [aria-current], :hover),
input[type=reset].outline.accent:is(:focus, [aria-current], :hover) {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline.accent:active,
input[type=reset].outline.accent:active {
  color: var(--accent-active);
  border-color: var(--accent-active);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline.danger,
input[type=reset].outline.danger {
  color: var(--danger);
  border-color: var(--danger);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline.danger:is(:focus, [aria-current], :hover),
input[type=reset].outline.danger:is(:focus, [aria-current], :hover) {
  color: var(--danger-hover);
  border-color: var(--danger-hover);
}
:is(button, input[type=submit], input[type=button], [role=button]).outline.danger:active,
input[type=reset].outline.danger:active {
  color: var(--danger-active);
  border-color: var(--danger-active);
}

:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],
:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),
a[role=button]:not([href]) {
  opacity: 0.5;
  pointer-events: none;
}

button.close,
[role=button].close {
  padding: 0.25rem;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: inherit;
}
button.close:is(:focus, [aria-current], :hover),
[role=button].close:is(:focus, [aria-current], :hover) {
  background-color: rgba(0, 0, 0, 0.15);
}
button.close:active,
[role=button].close:active {
  background-color: rgba(0, 0, 0, 0.3);
}

.helptext {
  color: var(--color-secondary);
  font-size: var(--font-size-small);
  margin-top: -0.875rem;
  margin-bottom: 1rem;
  display: block;
}
.helptext ul {
  list-style-type: none;
  padding: 0;
}
.helptext ul li {
  color: var(--color-secondary);
  font-size: var(--font-size-small);
}

.errorlist {
  list-style-type: none;
  color: var(--del-color);
  font-weight: bold;
  font-size: var(--font-size-small);
  padding: 0;
  margin-top: -0.25rem;
  margin-bottom: 0.125rem;
}
.errorlist li:last-child {
  margin-bottom: 0;
}

ul.messages {
  list-style-type: none;
  padding: 0;
}
ul.messages li:last-child {
  margin-bottom: 0;
}

.container,
.container-slim,
.container-full {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 1rem;
}

.container {
  max-width: 1200px;
}

.container-slim {
  max-width: 600px;
}

.grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
}
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
  }
}
.grid > * {
  min-width: 0;
}

section {
  margin-bottom: 2rem;
}

body > header {
  background-color: var(--header-background-color);
  border-bottom: 1px solid var(--header-border-color);
  margin-bottom: 2rem;
}
body > header svg {
  margin-top: -4px;
}

body > main {
  min-height: 85vh;
  margin-bottom: 2rem;
}

body > footer {
  background-color: var(--footer-background-color);
  margin-bottom: 0;
  padding: 1rem;
  padding-bottom: 8rem;
}
body > footer a,
body > footer [role=link] {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}
body > footer a:not([role=button]):is([aria-current], :hover, :active, :focus, :visited),
body > footer [role=link]:not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
body > footer a svg:is([aria-current], :hover, :active, :focus),
body > footer [role=link] svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
body > footer p {
  color: var(--color-secondary);
}

nav,
nav > ul {
  display: flex;
  gap: 2rem;
}

nav {
  justify-content: space-between;
}
nav ol,
nav ul {
  list-style: none;
  align-items: center;
  margin-bottom: 0;
  padding: 0;
}
nav li {
  display: inline-block;
  margin: 0;
  padding-block: 0.5rem;
}
nav form,
nav button,
nav :is(#highSpecificity, input, .input-group, .group),
nav :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 0;
}
nav :where(a:not([role=button])),
nav :where([role=link]) {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
  display: inline-block;
  border-radius: 0.5rem;
}
nav :where(a:not([role=button])):not([role=button]):is([aria-current], :hover, :active, :focus, :visited),
nav :where([role=link]):not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
nav :where(a:not([role=button])) svg:is([aria-current], :hover, :active, :focus),
nav :where([role=link]) svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
@media (max-width: 600px) {
  nav {
    flex-direction: column;
    row-gap: 0;
  }
}
nav.breadcrumb {
  align-items: center;
  justify-content: start;
}
nav.breadcrumb ul li:not(:last-child)::after {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: var(--icon-chevron);
  mask-position: center;
  mask-size: 1rem auto;
  mask-repeat: no-repeat;
  transform: rotate(-90deg);
  content: "";
  vertical-align: middle;
  margin: -0.25rem -1rem 0 1rem;
}
nav.breadcrumb :is(a, #highSpecificity) {
  font-weight: 400;
}
nav.breadcrumb :is(a, #highSpecificity):is([aria-current], :hover, :active, :focus, :visited) {
  font-weight: 400;
}

aside nav,
aside ol,
aside ul,
aside li {
  display: block;
}
aside li {
  padding: 0.5rem 1rem;
}
aside li a {
  display: block;
}
aside li [role=button] {
  margin: inherit;
}
aside ul ul {
  margin-block: -0.5rem;
}
aside ul ul li {
  border-left: 1px solid var(--border-color);
  padding-block: 0.25rem;
}
aside ul ul li :is(a, #highSpecificity) {
  font-weight: 400;
}
aside ul ul li :is(a, #highSpecificity):is([aria-current], :hover, :active, :focus, :visited) {
  font-weight: 400;
}
aside ul ul ul li {
  border: none;
}

details {
  margin-bottom: 1.5rem;
  display: block;
}
details summary {
  cursor: pointer;
  list-style-type: none;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::marker {
  display: none;
  list-style-type: none;
}
details summary::-moz-list-bullet {
  list-style-type: none;
}
details summary[role=button] {
  width: 100%;
  text-align: left;
}
details summary::after {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  float: right;
  background-color: currentColor;
  mask-image: var(--icon-chevron);
  mask-position: center;
  mask-size: 1.5rem auto;
  mask-repeat: no-repeat;
  content: "";
  transition: 0.1s ease-in-out;
}
details[open] > summary {
  margin-bottom: 1rem;
}
details[open] > summary::after {
  transform: rotate(-180deg);
}
details > :last-child {
  margin-bottom: 0;
}

details:not(.secondary) > summary:not([role]) {
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}

details:not(.secondary)[open] > summary:not([role]) {
  box-shadow: inset 0 0 0 2px var(--form-background-color-focus);
  border-color: var(--form-background-color-focus);
}

details.secondary {
  display: block;
}
details.secondary summary {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
  text-align: right;
}
details.secondary summary:not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
details.secondary summary svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
details.secondary summary::after {
  display: none;
}

details.dropdown {
  position: relative;
  contain: layout;
}
details.dropdown[open] > summary {
  margin-bottom: inherit;
}
details.dropdown summary {
  list-style: none;
  cursor: pointer;
}

details.dropdown summary + ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 1000;
  background-color: var(--dropdown-background-color);
  border-radius: 0.5rem;
  inset-inline-end: 0;
  padding: 0;
  left: auto;
  min-width: max(fit-content, 200px);
  max-width: min(100vw - 1rem, 600px);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}
details.dropdown summary + ul li {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
details.dropdown summary + ul li:first-of-type {
  margin-top: 0.5rem;
}
details.dropdown summary + ul li:last-of-type {
  margin-bottom: 0.5rem;
}
details.dropdown summary + ul li a,
details.dropdown summary + ul li button {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color);
  background-color: transparent;
  width: 100%;
  border: none;
  text-align: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: normal;
  border-radius: 0;
}
details.dropdown summary + ul li a:hover,
details.dropdown summary + ul li button:hover {
  background-color: var(--dropdown-background-color-hover);
  text-decoration: none;
  font-weight: normal;
}
details.dropdown summary + ul li a:active,
details.dropdown summary + ul li button:active {
  background-color: var(--dropdown-background-color-active);
  font-weight: normal;
}
details.dropdown summary + ul li button {
  box-shadow: none;
}

/* Closing the detail content on clicking anywhere else */
details.dropdown[open] summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  cursor: default;
}

nav details.dropdown {
  margin-bottom: 0;
}

.pagination {
  gap: 0;
}
.pagination svg {
  margin-top: -4px;
}
.pagination li {
  border: 1px solid var(--border-color);
  padding: 0.25rem 0.625rem;
  margin-right: -1px;
  min-height: 36px;
}
.pagination li:last-child {
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.pagination li:first-child {
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}

.disabled {
  color: var(--form-border-color-disabled);
}

.icon {
  vertical-align: middle;
  display: inline-block;
}

.blog-entry figure,
.blog-entry img,
.blog-entry .gallery,
.blog-entry #chartdiv {
  margin-inline: 0;
}
.blog-entry img {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
}
@media (min-width: 600px) {
  .blog-entry {
    display: grid;
    grid-template-columns: minmax(0, 10ch) minmax(42ch, 62ch) minmax(0, 10ch);
    justify-content: center;
  }
  .blog-entry > * {
    grid-column: 2;
    min-width: 0;
  }
  .blog-entry > img,
  .blog-entry > figure,
  .blog-entry > .gallery,
  .blog-entry > #chartdiv {
    grid-column: 1/-1;
  }
}

.gallery {
  display: grid;
  gap: 0.5rem;
  grid-auto-rows: 160px;
  grid-auto-flow: dense;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: stretch;
}
.gallery a,
.gallery figure {
  margin: 0;
  overflow: hidden;
  position: relative;
  border-radius: 0.5rem;
}
.gallery a img,
.gallery figure img {
  transition: transform 0.4s;
  object-position: top;
}
.gallery a img:hover,
.gallery figure img:hover {
  transform: scale(1.15);
  cursor: pointer;
}
.gallery figcaption {
  display: none;
}
.gallery img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.05);
}
.gallery .horizontal,
.gallery .wide {
  grid-column: span 2;
}
.gallery .vertical,
.gallery .tall {
  grid-row: span 2;
}
.gallery .ultra-wide {
  grid-column: span 3;
}
.gallery .ultra-tall {
  grid-row: span 3;
}
.gallery .big {
  grid-column: span 2;
  grid-row: span 2;
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--lightbox-background-color);
}
.lightbox .lightbox-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 100%;
  height: 100%;
  color: var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox .lightbox-content img {
  max-height: 100vh;
  max-width: 100%;
  margin-inline: auto;
  display: block;
  object-fit: cover;
}
.lightbox .lightbox-content .lightbox-numbertext {
  font-size: 1rem;
  color: var(--h1-color);
  padding: 0.5rem 1rem;
  position: absolute;
  top: 0;
  background-color: var(--lightbox-overlay-background-color);
  border-radius: 0 0 0.5rem 0;
}
.lightbox .lightbox-content .lightbox-caption {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  margin: 0 auto;
  text-align: center;
  max-width: 1200px;
}
.lightbox .lightbox-content .lightbox-caption p {
  margin-bottom: 0;
  padding: 0.5rem 1rem;
  background-color: var(--lightbox-overlay-background-color);
  color: var(--h1-color);
  border-radius: 0.5rem 0.5rem 0 0;
}
.lightbox .lightbox-content .lightbox-caption p:empty {
  display: none;
}
.lightbox .lightbox-content .slide {
  position: relative;
  justify-content: start;
}
.lightbox .lightbox-content .close,
.lightbox .lightbox-content .prev,
.lightbox .lightbox-content .next {
  position: absolute;
  color: var(--h1-color);
  cursor: pointer;
  background-color: var(--lightbox-overlay-background-color);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox .lightbox-content .close:hover, .lightbox .lightbox-content .close:focus,
.lightbox .lightbox-content .prev:hover,
.lightbox .lightbox-content .prev:focus,
.lightbox .lightbox-content .next:hover,
.lightbox .lightbox-content .next:focus {
  text-decoration: none;
  color: var(--h1-color);
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.lightbox .lightbox-content .close {
  padding: 1rem;
  right: 0;
  top: 0;
  z-index: 2;
  border-radius: 0 0 0 0.5rem;
}
.lightbox .lightbox-content .prev,
.lightbox .lightbox-content .next {
  top: 50%;
  width: auto;
  padding: 1rem;
  margin-top: -50px;
}
.lightbox .lightbox-content .prev {
  left: 0;
  border-radius: 0 0.5rem 0.5rem 0;
}
.lightbox .lightbox-content .next {
  right: 0;
  border-radius: 0.5rem 0 0 0.5rem;
}

.journal-grid {
  display: block;
}
.journal-grid .date {
  margin: 0;
}
@media (min-width: 600px) {
  .journal-grid {
    display: grid;
    justify-content: top;
    gap: 1rem 1rem;
    grid-template-columns: max-content minmax(400px, 600px) minmax(0, 64px);
  }
  .journal-grid > * {
    margin: 0;
  }
}

.book-gallery {
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: dense;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 128px);
  margin-bottom: 2rem;
}
.book-gallery * {
  margin: 0;
}
.book-gallery img {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.book-gallery .selected {
  background-color: var(--form-background-color-active);
  border-color: var(--form-background-color-focus);
  box-shadow: 0 0 0 0.25rem var(--form-background-color-focus);
  border-radius: 0.5rem;
  border-width: 1px;
  z-index: 10;
}

.book-table a {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
  font-weight: inherit;
}
.book-table a:not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
.book-table a svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
.book-table a:is([aria-current], :hover, :active, :focus, :visited) {
  font-weight: inherit;
}

.fake-input {
  width: 100%;
  appearance: none;
  padding: 0.625rem 1rem;
  background-color: var(--form-background-color);
  border: 1px solid var(--form-border-color);
  border-radius: 0.5rem;
  color: var(--form-color);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 400;
  outline: none;
}
.fake-input.disabled {
  background-color: var(--form-background-color-disabled);
  border-color: var(--form-border-color-disabled);
  opacity: 0.5;
  pointer-events: none;
}

.yields-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.yields-icons img {
  object-fit: cover;
  width: 100%;
}
.yields-icons img:is(:hover, :focus, [aria-current]) {
  background-color: rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.yields-icons img:active {
  background-color: rgba(0, 0, 0, 0.3);
}
.yields-icons .selected {
  background-color: var(--form-background-color-active);
  border-color: var(--form-background-color-focus);
  border-radius: 0.5rem;
  box-shadow: 0 0 0 0.25rem var(--form-background-color-focus);
  border-width: 1px;
  z-index: 10;
}

.glow-frame {
  animation: glow 2s ease-in-out infinite alternate;
  overflow: visible;
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700, 0 0 15px #ffd700;
  }
  to {
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
  }
}
.list-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.list-table ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.list-table ul:not(:first-child) {
  text-align: center;
}
.list-table li {
  padding: 0.5rem;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
}
.list-table li:first-child {
  border-top: 1px solid var(--border-color);
}

.column-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(9, auto);
  grid-template-columns: 300px, repeat(auto-fit, minmax(36px, 1fr));
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.column-grid select,
.column-grid input {
  margin: 0;
}
.column-grid select {
  background-position: center right 0.2rem;
}
.column-grid input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

details.expandable-textarea {
  margin-bottom: 0.5rem;
}
details.expandable-textarea summary:not(#increase-specificity) {
  margin-bottom: 0.5rem;
  padding: 0;
  border: none;
  box-shadow: none;
}

.card {
  padding: 0;
  margin: 0;
  background-color: var(--card-background-color);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.card :where(figure) {
  margin: 0;
}
.card > :where(h1, h2, h3, h4, h5, h6, p, button),
.card > a > :where(h1, h2, h3, h4, h5, h6, p, button) {
  margin: 0.5rem 1rem;
}
.card > ul,
.card > ol {
  list-style: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
.card > ul li,
.card > ol li {
  margin: 0;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--card-border-color);
}
.card > ul li:last-child,
.card > ol li:last-child {
  border-bottom: 1px solid var(--card-border-color);
}
.card header,
.card footer {
  background-color: var(--card-background-color-variant);
  padding: 0.5rem 1rem;
}
.card header *,
.card footer * {
  margin-block: 0;
}
.card header {
  border-bottom: 1px solid var(--card-border-color);
}
.card footer {
  border-top: 1px solid var(--card-border-color);
}
.card .grid {
  padding: 0;
}
.card .grid > * {
  border-right: 1px solid var(--card-border-color);
  margin: 0;
  padding: 0.5rem 1rem;
}
.card .grid > *:last-child {
  border-right: none;
}

.selected {
  background-color: var(--form-background-color-active);
  border-color: var(--form-background-color-focus);
  box-shadow: 0 0 0 0.25rem var(--form-background-color-focus);
  border-width: 1px;
  z-index: 10;
}

.yield-cards,
.cards,
.habit-cards {
  justify-content: center;
  gap: 1rem 1rem;
  display: grid;
  grid-template-columns: minmax(360px, 500px);
}
@media (min-width: calc(720px + 4rem)) {
  .yield-cards,
  .cards,
  .habit-cards {
    grid-template-columns: repeat(2, minmax(360px, 500px));
  }
}
@media (min-width: calc(1080px + 5rem)) {
  .yield-cards,
  .cards,
  .habit-cards {
    grid-template-columns: repeat(3, minmax(360px, 500px));
  }
}

.yield-card {
  display: grid;
  padding: 1rem;
  grid-template-areas: "icon name yield" "icon desc alt";
  grid-template-columns: 64px auto minmax(0px, max-content);
  column-gap: 1rem;
}
.yield-card > * {
  margin: 0;
}
.yield-card .icon {
  grid-area: icon;
}
.yield-card .name {
  grid-area: name;
  align-self: baseline;
}
.yield-card .yield {
  grid-area: yield;
  align-self: baseline;
  text-align: right;
}
.yield-card .desc {
  grid-area: desc;
}
.yield-card .alt {
  grid-area: alt;
  text-align: right;
}

.habit-card {
  display: grid;
  padding: 1rem;
  grid-template-areas: "icon name" "icon goal" "desc desc" "cal cal" "footer footer";
  grid-template-columns: 64px auto;
  column-gap: 1rem;
  overflow: visible;
}
.habit-card > * {
  margin: 0;
}
.habit-card .icon {
  grid-area: icon;
}
.habit-card .name {
  grid-area: name;
  align-self: baseline;
}
.habit-card .goal {
  grid-area: goal;
}
.habit-card .desc {
  grid-area: desc;
  margin-top: 0.5rem;
}
.habit-card .cal {
  grid-area: cal;
}
.habit-card .footer {
  grid-area: footer;
  margin: 0 -1rem -1rem -1rem;
  padding: 0.25rem 0 0.5rem 0;
  border-radius: 0 0 0.5rem 0.5rem;
  align-self: self-end;
}
.habit-card .footer > * {
  margin: 0;
}
.habit-card .footer nav:has(> ul:only-child) {
  justify-content: end;
}
.habit-card .footer nav {
  padding: 0;
  margin-inline: 1rem;
}
.habit-card .footer nav ul li {
  padding: 0;
}

.product-card {
  display: grid;
  padding: 1rem;
  grid-template-areas: "icon name" "icon desc" "icon details";
  grid-template-columns: 64px auto;
  column-gap: 1rem;
}
.product-card > * {
  margin: 0;
}
.product-card .icon {
  grid-area: icon;
}
.product-card .name {
  grid-area: name;
  align-self: baseline;
}
.product-card .details {
  grid-area: details;
}
.product-card .desc {
  grid-area: desc;
}

.book-card {
  display: grid;
  padding: 0;
  grid-template-areas: "cover title" "cover author";
  grid-template-columns: 128px auto;
  grid-template-rows: fit-content auto;
  column-gap: 1rem;
  row-gap: 1rem;
  margin-bottom: 2rem;
  position: relative;
}
.book-card > * {
  margin: 0;
}
.book-card a {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}
.book-card a:not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
.book-card a svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
.book-card figure {
  max-height: 210px;
  min-height: 128px;
}
.book-card .cover {
  grid-area: cover;
}
.book-card .cover img {
  border-right: 1px solid var(--card-border-color);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-card .title {
  grid-area: title;
  align-self: end;
}
.book-card .title .series {
  color: var(--color-tertiary);
  font-weight: 400;
  margin-bottom: 0;
}
.book-card .title .main-title {
  margin-bottom: 0;
  line-height: 1.1;
}
.book-card .title .subtitle {
  margin-bottom: 0;
  color: var(--color-secondary);
  font-weight: 700;
}
.book-card .author {
  grid-area: author;
  font-weight: 400;
  position: relative;
}
.book-card .status {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
}
.book-card .tags {
  position: absolute;
  bottom: 0;
  margin-bottom: 0.5rem;
}

.book-cards {
  justify-content: center;
  gap: 1rem 1rem;
  display: grid;
  margin-bottom: 2rem;
  grid-template-columns: minmax(360px, 600px);
}
@media (min-width: calc(720px + 4rem)) {
  .book-cards {
    grid-template-columns: repeat(2, minmax(360px, 600px));
  }
}
@media (min-width: calc(1080px + 5rem)) {
  .book-cards {
    grid-template-columns: repeat(3, minmax(360px, 600px));
  }
}
.book-cards > .book-card {
  margin: 0;
}

.ai-art-card {
  display: flex;
  flex-direction: row;
  margin-bottom: 2rem;
  gap: 1rem;
}
.ai-art-card figure {
  margin: 0;
  overflow: hidden;
}
.ai-art-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.ai-art-card .album-cover {
  width: 256px;
  height: 256px;
}
.ai-art-card .four-img-album-cover {
  display: grid;
  gap: 0;
  grid-template-columns: 128px 128px;
  grid-template-rows: 128px 128px;
}
.ai-art-card .content {
  margin-block: 1rem;
}

.blog-card figure {
  margin-bottom: 0.5rem;
}
.blog-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top;
}
.blog-card :is(h1, h2, h3, h4, h5, h6) {
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-card .ingress {
  overflow: hidden;
  height: 3rem;
  position: relative;
}
.blog-card .ingress:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: -0.5rem;
  width: 25%;
  height: 1.5rem;
  background: linear-gradient(to right, transparent, var(--card-background-color) 50%);
}

.journal-entry {
  display: grid;
  padding: 1rem;
  gap: 0.5rem 1rem;
  grid-template-areas: "icon name" "icon tags" "desc desc" "foot foot";
  grid-template-columns: 64px auto;
  overflow: visible;
}
.journal-entry * {
  margin: 0;
}
.journal-entry .icon {
  grid-area: icon;
}
.journal-entry .name {
  grid-area: name;
  align-self: baseline;
}
.journal-entry .tags {
  grid-area: tags;
}
.journal-entry .desc {
  grid-area: desc;
}
.journal-entry .foot {
  grid-area: foot;
  margin: 0 -1rem -1rem -1rem;
  padding: 0.25rem 0 0.5rem 0;
  border-radius: 0 0 0.5rem 0.5rem;
  align-self: self-end;
}
.journal-entry .foot nav {
  justify-content: end;
  padding: 0;
  margin-inline: 1rem;
}
.journal-entry .foot nav ul li {
  padding: 0;
}

[data-tooltip] {
  position: relative;
}
[data-tooltip]:not(a, button, input, img) {
  border-bottom: 1px dotted;
  text-decoration: none;
  cursor: help;
}
[data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
  display: block;
  z-index: 99;
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding: 0.25rem 0.625rem;
  overflow: hidden;
  transform: translate(-50%, -0.25rem);
  border-radius: 0.5rem;
  background: var(--tooltip-background-color);
  content: attr(data-tooltip);
  color: var(--tooltip-color);
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-small);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
[data-tooltip][data-placement=top]::after, [data-tooltip]::after {
  padding: 0;
  transform: translate(-50%, 0rem);
  border-top: 0.3rem solid;
  border-right: 0.3rem solid transparent;
  border-left: 0.3rem solid transparent;
  border-radius: 0;
  background-color: transparent;
  content: "";
  color: var(--tooltip-background-color);
}
[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
  top: 100%;
  bottom: auto;
  transform: translate(-50%, 0.25rem);
}
[data-tooltip][data-placement=bottom]:after {
  transform: translate(-50%, -0.3rem);
  border: 0.3rem solid transparent;
  border-bottom: 0.3rem solid;
}
[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
  top: 50%;
  right: 100%;
  bottom: auto;
  left: auto;
  transform: translate(-0.25rem, -50%);
}
[data-tooltip][data-placement=left]:after {
  transform: translate(0.3rem, -50%);
  border: 0.3rem solid transparent;
  border-left: 0.3rem solid;
}
[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 100%;
  transform: translate(0.25rem, -50%);
}
[data-tooltip][data-placement=right]:after {
  transform: translate(-0.3rem, -50%);
  border: 0.3rem solid transparent;
  border-right: 0.3rem solid;
}
[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
  opacity: 1;
}

[role=alert] {
  background-color: var(--secondary);
  color: var(--secondary-inverse);
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
[role=alert] a {
  text-decoration: none;
  font-weight: bold;
  color: inherit;
}
[role=alert] a:not([role=button]):is([aria-current], :hover, :active, :focus, :visited) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  font-weight: bold;
  color: inherit;
}
[role=alert] a svg:is([aria-current], :hover, :active, :focus) {
  fill: var(--color-tertiary);
}
[role=alert].accent {
  background-color: var(--accent-secondary);
  color: var(--accent-secondary-inverse);
}
[role=alert].danger {
  background-color: var(--danger-secondary);
  color: var(--danger-secondary-inverse);
}
[role=alert].neutral {
  background-color: var(--neutral-secondary);
  color: inherit;
}

.badge {
  font-size: 0.75em;
  font-weight: bold;
  background-color: var(--secondary);
  color: var(--secondary-inverse);
  padding: 0.25rem 0.625rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
}
.badge.accent {
  background-color: var(--accent-secondary);
  color: var(--accent-secondary-inverse);
}
.badge.danger {
  background-color: var(--danger-secondary);
  color: var(--danger-secondary-inverse);
}
.badge.success {
  background-color: var(--success-secondary);
  color: var(--success-secondary-inverse);
}
.badge.neutral {
  background-color: var(--neutral);
  color: inherit;
}

.pill {
  font-size: 0.75em;
  font-weight: bold;
  background-color: var(--secondary);
  color: var(--secondary-inverse);
  padding: 0.25rem 0.625rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 9999px;
}
.pill.accent {
  background-color: var(--accent-secondary);
  color: var(--accent-secondary-inverse);
}
.pill.danger {
  background-color: var(--danger-secondary);
  color: var(--danger-secondary-inverse);
}
.pill.success {
  background-color: var(--success-secondary);
  color: var(--success-secondary-inverse);
}
.pill.neutral {
  background-color: var(--neutral);
  color: inherit;
}

a .badge,
a.badge,
a .pill,
a.pill {
  text-decoration: none;
}
a .badge:is(:focus, [aria-current], :hover),
a.badge:is(:focus, [aria-current], :hover),
a .pill:is(:focus, [aria-current], :hover),
a.pill:is(:focus, [aria-current], :hover) {
  background-color: var(--secondary-hover);
}
a .badge:active,
a.badge:active,
a .pill:active,
a.pill:active {
  background-color: var(--secondary-active);
}
a .badge.accent:is(:focus, [aria-current], :hover),
a.badge.accent:is(:focus, [aria-current], :hover),
a .pill.accent:is(:focus, [aria-current], :hover),
a.pill.accent:is(:focus, [aria-current], :hover) {
  background-color: var(--accent-secondary-hover);
}
a .badge.accent:active,
a.badge.accent:active,
a .pill.accent:active,
a.pill.accent:active {
  background-color: var(--accent-secondary-active);
}
a .badge.danger:is(:focus, [aria-current], :hover),
a.badge.danger:is(:focus, [aria-current], :hover),
a .pill.danger:is(:focus, [aria-current], :hover),
a.pill.danger:is(:focus, [aria-current], :hover) {
  background-color: var(--danger-secondary-hover);
}
a .badge.danger:active,
a.badge.danger:active,
a .pill.danger:active,
a.pill.danger:active {
  background-color: var(--danger-secondary-active);
}
a .badge.success:is(:focus, [aria-current], :hover),
a.badge.success:is(:focus, [aria-current], :hover),
a .pill.success:is(:focus, [aria-current], :hover),
a.pill.success:is(:focus, [aria-current], :hover) {
  background-color: var(--success-secondary-hover);
}
a .badge.success:active,
a.badge.success:active,
a .pill.success:active,
a.pill.success:active {
  background-color: var(--success-secondary-active);
}
a .badge.neutral:is(:focus, [aria-current], :hover),
a.badge.neutral:is(:focus, [aria-current], :hover),
a .pill.neutral:is(:focus, [aria-current], :hover),
a.pill.neutral:is(:focus, [aria-current], :hover) {
  background-color: var(--neutral-hover);
}
a .badge.neutral:active,
a.badge.neutral:active,
a .pill.neutral:active,
a.pill.neutral:active {
  background-color: var(--neutral-active);
}

.calendar {
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--card-background-color);
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  width: 400px;
}
.calendar header {
  display: grid;
  text-align: center;
  grid-template-columns: 1fr 5fr 1fr;
  padding-block: 0.5rem;
  background-color: var(--card-background-color-variant);
  border-bottom: 1px solid var(--card-border-color);
}
.calendar .nav-button {
  cursor: pointer;
  margin: 0;
}
.calendar .month-year {
  font-weight: bold;
}

.weekdays, .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.weekdays div {
  padding: 0;
}

.weekdays {
  font-size: var(--font-size-small);
  margin-top: 0.5rem;
}

.days div,
.days button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  margin-inline: auto;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: none;
}

.days .prev-month, .days .next-month {
  color: #ccc;
  background: none;
}

.days .current-day {
  background-color: var(--primary);
  color: var(--primary-inverse);
}

.h1 {
  font-size: 2rem;
  line-height: 2.25rem;
  color: var(--h1-color);
}

.h2 {
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--h2-color);
}

.h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: var(--h3-color);
}

.h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--h4-color);
}

.h5 {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--h5-color);
}

.h6 {
  font-size: var(--font-size-small);
  line-height: 1.25rem;
  color: var(--h6-color);
}

.small {
  font-size: var(--font-size-small);
  line-height: 1.25rem;
}
.small svg {
  width: 1rem;
  height: 1rem;
}

.inline {
  display: inline;
  width: auto;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
  width: auto;
}

.hidden {
  display: none;
}

.overflow {
  overflow: visible;
}

.color-secondary {
  color: var(--color-secondary);
}

.color-tertiary {
  color: var(--color-tertiary);
}

.color-danger {
  color: var(--danger);
}

.color-success {
  color: var(--success);
}

.m-0 {
  margin: 0;
}

.mx-0 {
  margin-inline: 0;
}

.my-0 {
  margin-block: 0;
}

.mt-0 {
  margin-block-start: 0;
}

.mr-0 {
  margin-inline-end: 0;
}

.mb-0 {
  margin-block-end: 0;
}

.ml-0 {
  margin-inline-start: 0;
}

.m-0\.25 {
  margin: 0.25rem;
}

.mx-0\.25 {
  margin-inline: 0.25rem;
}

.my-0\.25 {
  margin-block: 0.25rem;
}

.mt-0\.25 {
  margin-block-start: 0.25rem;
}

.mr-0\.25 {
  margin-inline-end: 0.25rem;
}

.mb-0\.25 {
  margin-block-end: 0.25rem;
}

.ml-0\.25 {
  margin-inline-start: 0.25rem;
}

.m-0\.5 {
  margin: 0.5rem;
}

.mx-0\.5 {
  margin-inline: 0.5rem;
}

.my-0\.5 {
  margin-block: 0.5rem;
}

.mt-0\.5 {
  margin-block-start: 0.5rem;
}

.mr-0\.5 {
  margin-inline-end: 0.5rem;
}

.mb-0\.5 {
  margin-block-end: 0.5rem;
}

.ml-0\.5 {
  margin-inline-start: 0.5rem;
}

.m-1 {
  margin: 1rem;
}

.mx-1 {
  margin-inline: 1rem;
}

.my-1 {
  margin-block: 1rem;
}

.mt-1 {
  margin-block-start: 1rem;
}

.mr-1 {
  margin-inline-end: 1rem;
}

.mb-1 {
  margin-block-end: 1rem;
}

.ml-1 {
  margin-inline-start: 1rem;
}

.m-1\.5 {
  margin: 1.5rem;
}

.mx-1\.5 {
  margin-inline: 1.5rem;
}

.my-1\.5 {
  margin-block: 1.5rem;
}

.mt-1\.5 {
  margin-block-start: 1.5rem;
}

.mr-1\.5 {
  margin-inline-end: 1.5rem;
}

.mb-1\.5 {
  margin-block-end: 1.5rem;
}

.ml-1\.5 {
  margin-inline-start: 1.5rem;
}

.m-2 {
  margin: 2rem;
}

.mx-2 {
  margin-inline: 2rem;
}

.my-2 {
  margin-block: 2rem;
}

.mt-2 {
  margin-block-start: 2rem;
}

.mr-2 {
  margin-inline-end: 2rem;
}

.mb-2 {
  margin-block-end: 2rem;
}

.ml-2 {
  margin-inline-start: 2rem;
}

.m-4 {
  margin: 4rem;
}

.mx-4 {
  margin-inline: 4rem;
}

.my-4 {
  margin-block: 4rem;
}

.mt-4 {
  margin-block-start: 4rem;
}

.mr-4 {
  margin-inline-end: 4rem;
}

.mb-4 {
  margin-block-end: 4rem;
}

.ml-4 {
  margin-inline-start: 4rem;
}

.m-6 {
  margin: 6rem;
}

.mx-6 {
  margin-inline: 6rem;
}

.my-6 {
  margin-block: 6rem;
}

.mt-6 {
  margin-block-start: 6rem;
}

.mr-6 {
  margin-inline-end: 6rem;
}

.mb-6 {
  margin-block-end: 6rem;
}

.ml-6 {
  margin-inline-start: 6rem;
}

.m-8 {
  margin: 8rem;
}

.mx-8 {
  margin-inline: 8rem;
}

.my-8 {
  margin-block: 8rem;
}

.mt-8 {
  margin-block-start: 8rem;
}

.mr-8 {
  margin-inline-end: 8rem;
}

.mb-8 {
  margin-block-end: 8rem;
}

.ml-8 {
  margin-inline-start: 8rem;
}

.p-0 {
  padding: 0;
}

.px-0 {
  padding-inline: 0;
}

.py-0 {
  padding-block: 0;
}

.pt-0 {
  padding-block-start: 0;
}

.pr-0 {
  padding-inline-end: 0;
}

.pb-0 {
  padding-block-end: 0;
}

.pl-0 {
  padding-inline-start: 0;
}

.p-0\.25 {
  padding: 0.25rem;
}

.px-0\.25 {
  padding-inline: 0.25rem;
}

.py-0\.25 {
  padding-block: 0.25rem;
}

.pt-0\.25 {
  padding-block-start: 0.25rem;
}

.pr-0\.25 {
  padding-inline-end: 0.25rem;
}

.pb-0\.25 {
  padding-block-end: 0.25rem;
}

.pl-0\.25 {
  padding-inline-start: 0.25rem;
}

.p-0\.5 {
  padding: 0.5rem;
}

.px-0\.5 {
  padding-inline: 0.5rem;
}

.py-0\.5 {
  padding-block: 0.5rem;
}

.pt-0\.5 {
  padding-block-start: 0.5rem;
}

.pr-0\.5 {
  padding-inline-end: 0.5rem;
}

.pb-0\.5 {
  padding-block-end: 0.5rem;
}

.pl-0\.5 {
  padding-inline-start: 0.5rem;
}

.p-1 {
  padding: 1rem;
}

.px-1 {
  padding-inline: 1rem;
}

.py-1 {
  padding-block: 1rem;
}

.pt-1 {
  padding-block-start: 1rem;
}

.pr-1 {
  padding-inline-end: 1rem;
}

.pb-1 {
  padding-block-end: 1rem;
}

.pl-1 {
  padding-inline-start: 1rem;
}

.p-1\.5 {
  padding: 1.5rem;
}

.px-1\.5 {
  padding-inline: 1.5rem;
}

.py-1\.5 {
  padding-block: 1.5rem;
}

.pt-1\.5 {
  padding-block-start: 1.5rem;
}

.pr-1\.5 {
  padding-inline-end: 1.5rem;
}

.pb-1\.5 {
  padding-block-end: 1.5rem;
}

.pl-1\.5 {
  padding-inline-start: 1.5rem;
}

.p-2 {
  padding: 2rem;
}

.px-2 {
  padding-inline: 2rem;
}

.py-2 {
  padding-block: 2rem;
}

.pt-2 {
  padding-block-start: 2rem;
}

.pr-2 {
  padding-inline-end: 2rem;
}

.pb-2 {
  padding-block-end: 2rem;
}

.pl-2 {
  padding-inline-start: 2rem;
}

.p-4 {
  padding: 4rem;
}

.px-4 {
  padding-inline: 4rem;
}

.py-4 {
  padding-block: 4rem;
}

.pt-4 {
  padding-block-start: 4rem;
}

.pr-4 {
  padding-inline-end: 4rem;
}

.pb-4 {
  padding-block-end: 4rem;
}

.pl-4 {
  padding-inline-start: 4rem;
}

.p-6 {
  padding: 6rem;
}

.px-6 {
  padding-inline: 6rem;
}

.py-6 {
  padding-block: 6rem;
}

.pt-6 {
  padding-block-start: 6rem;
}

.pr-6 {
  padding-inline-end: 6rem;
}

.pb-6 {
  padding-block-end: 6rem;
}

.pl-6 {
  padding-inline-start: 6rem;
}

.p-8 {
  padding: 8rem;
}

.px-8 {
  padding-inline: 8rem;
}

.py-8 {
  padding-block: 8rem;
}

.pt-8 {
  padding-block-start: 8rem;
}

.pr-8 {
  padding-inline-end: 8rem;
}

.pb-8 {
  padding-block-end: 8rem;
}

.pl-8 {
  padding-inline-start: 8rem;
}

.autocomplete {
  background-color: var(--dropdown-background-color);
  z-index: 1000;
  overflow: auto;
  border: 1px solid var(--form-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.autocomplete * {
  font: inherit;
}

.autocomplete > div {
  padding: 0.5rem 1rem;
}

.autocomplete > div:hover:not(.group),
.autocomplete > div.selected {
  background-color: var(--secondary);
  cursor: pointer;
  border: none;
  box-shadow: none;
}

.clr-field {
  margin-bottom: 1rem;
}

.clr-field button {
  left: auto !important;
  height: 1.75rem !important;
  width: 1.75rem !important;
  right: 1rem !important;
}

/*# sourceMappingURL=style.css.map */