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

::before, ::after {
  --en-content: '';
}

html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

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

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

:-moz-focusring {
  outline: auto;
}

progress {
  vertical-align: baseline;
}

summary {
  display: list-item;
}

ol, ul, menu {
  list-style: none;
}

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

img, video {
  max-width: 100%;
  height: auto;
}

button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

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

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

::file-selector-button {
  margin-inline-end: 4px;
}

::placeholder {
  opacity: 1;
}

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

textarea {
  resize: vertical;
}

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

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

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

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

::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

:-moz-ui-invalid {
  box-shadow: none;
}

button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
  appearance: button;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}

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

*, ::before, ::after, ::backdrop, ::-webkit-backdrop {
  --en-border-spacing-x: 0;
  --en-border-spacing-y: 0;
  --en-translate-x: 0;
  --en-translate-y: 0;
  --en-translate-z: 0;
  --en-rotate-x: 0;
  --en-rotate-y: 0;
  --en-rotate-z: 0;
  --en-skew-x: 0;
  --en-skew-y: 0;
  --en-scale-x: 1;
  --en-scale-y: 1;
  --en-scale-z: 1;
  --en-pan-x: ;
  --en-pan-y: ;
  --en-pinch-zoom: ;
  --en-scroll-snap-strictness: proximity;
  --en-ordinal: ;
  --en-slashed-zero: ;
  --en-numeric-figure: ;
  --en-numeric-spacing: ;
  --en-numeric-fraction: ;
  --en-ring-inset: ;
  --en-ring-offset-width: 0px;
  --en-ring-offset-color: #fff;
  --en-ring-color: currentColor;
  --en-ring-offset-shadow: 0 0 #0000;
  --en-ring-shadow: 0 0 #0000;
  --en-shadow: 0 0 #0000;
  --en-shadow-colored: 0 0 #0000;
  --en-blur: ;
  --en-brightness: ;
  --en-contrast: ;
  --en-grayscale: ;
  --en-hue-rotate: ;
  --en-invert: ;
  --en-saturate: ;
  --en-sepia: ;
  --en-drop-shadow: ;
  --en-backdrop-blur: ;
  --en-backdrop-brightness: ;
  --en-backdrop-contrast: ;
  --en-backdrop-grayscale: ;
  --en-backdrop-hue-rotate: ;
  --en-backdrop-invert: ;
  --en-backdrop-opacity: ;
  --en-backdrop-saturate: ;
  --en-backdrop-sepia: ;
}

.delay-show {
    animation: 10s showWithDelay;
    animation-fill-mode: forwards;

    visibility: hidden;
}

@keyframes showWithDelay {
    99% {
        visibility: hidden;
    }

    100% {
        visibility: visible;
    }
}

.fadeIn-start {
    position: absolute;
    transition: opacity 0.3s ease-out, transform 0.3s ease-in-out;
    opacity: 0;
    transform: scale(0.8);
}

.fadeIn {
    opacity: 1;
    transform: scale(1);
}

.fadeOut-start {
    position: absolute;
    transition: opacity 0.3s ease-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: scale(1);
}

.fadeOut {
    opacity: 0;
    transform: scale(0.8);
}

/* I copied these from Tailwind output due to encrecss not supporting them. */
.motion-safe\:animate-\[bounce_2s_infinite\] {
    @media (prefers-reduced-motion: no-preference) {
        animation: bounce 2s infinite;
    }
}

.motion-safe\:animate-\[bounce_2s_infinite_200ms\] {
    @media (prefers-reduced-motion: no-preference) {
        animation: bounce 2s infinite 200ms;
    }
}

.motion-safe\:animate-\[bounce_2s_infinite_400ms\] {
    @media (prefers-reduced-motion: no-preference) {
        animation: bounce 2s infinite 400ms;
    }
}

.motion-safe\:animate-\[bounce_2s_infinite\] {
    @media (prefers-reduced-motion: no-preference) {
        animation: bounce 2s infinite;
    }
}

.motion-safe\:animate-\[bounce_2s_infinite_200ms\] {
    @media (prefers-reduced-motion: no-preference) {
        animation: bounce 2s infinite 200ms;
    }
}

.motion-safe\:animate-\[bounce_2s_infinite_400ms\] {
    @media (prefers-reduced-motion: no-preference) {
        animation: bounce 2s infinite 400ms;
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/*!
glass-button.css:

MIT License

Copyright (c) 2023 David Darnes

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

.glass-button {
    -webkit-user-select: none;
    display: inline-block;
    user-select: none;
    backdrop-filter: contrast(0.8) saturate(2);
}

/* button */

.glass-button {
    --blur: 8px;
    --highLightIntensity: 0.75;
    --lightAngle: -20deg;
    --strokeWidth: 1.5px;

    position: relative;

    align-items: center;
    appearance: none;
    backdrop-filter: blur(var(--blur)) saturate(120%);
    background: rgba(255, 255, 255, 0.025);
    border-radius: 24px;
    border: 0;
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1), 0px 0px 3px rgba(0, 0, 0, 0.03), 0px 2px 13px rgba(0, 0, 0, 0.05), 0px 3px 28px rgba(0, 0, 0, 0.08), 0px 6px 50px rgba(0, 0, 0, 0.1);
    display: flex;
    font-size: 16px;
    gap: 0;
    line-height: 16px;
    height: 48px;
    outline-offset: calc(var(--strokeWidth) * -1);
    outline: rgba(255, 255, 255, 0.05) var(--strokeWidth) solid;
    overflow: hidden;
    transition: all 250ms;
    padding: 16px 24px;

}

.glass-button:hover {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(var(--blur)) saturate(140%);
    cursor: pointer;
    filter: drop-shadow(0px 0px 5px #fff) brightness(1.15);
    box-shadow: 0 0 2.8rem 0px rgba(0, 0, 0, 0.39) inset;
}

.glass-button:active {
    background: rgba(255, 255, 255, 0.125);
    box-shadow: 0 0 1.5rem 0px light-dark(rgba(0, 0, 0, 0.39), rgba(0, 0, 0, 0.6)) inset, 0 0 0.5rem 0px light-dark(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1)) inset;
  filter: drop-shadow(0px 0px 5px light-dark(#fff, #000)) brightness(1.05);

}

/* label */

.glass-button > :not([class*="highlight"]):not([class*="gloss"]) {
    z-index: 3;
    transition: all 250ms;
}

.glass-button:hover > :not([class*="highlight"]):not([class*="gloss"]) {
    filter: drop-shadow(0px 0px 10px #fff) drop-shadow(0px 0px 5px #fff);
}

.glass-button:active > :not([class*="highlight"]):not([class*="gloss"]) {
    filter: drop-shadow(0px 0px 10px #fff) drop-shadow(0px 0px 5px #fff);
    @media (prefers-color-scheme: dark) {
        filter: drop-shadow(0px 3px 3px #000) drop-shadow(0px 3px 3px #000) drop-shadow(0px 3px 3px #000);
    }
}

/* glass details */

.glass-button [class*="highlight"] {
    border: white var(--strokeWidth) solid;
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
    z-index: 2;
    filter: blur(0.3px);
    pointer-events: none;
}

.glass-button .highlight-1-base {
    opacity: calc(var(--highLightIntensity) / 4);
    mask-image: linear-gradient(var(--lightAngle), transparent 50%, black);
}

.glass-button .highlight-1-spot {
    opacity: calc(var(--highLightIntensity) / 2);
    mask-image: linear-gradient(var(--lightAngle), transparent 80%, black);
}

.glass-button .highlight-2-base {
    opacity: calc(var(--highLightIntensity) / 4);
    mask-image: linear-gradient(calc(180deg - var(--lightAngle) * -1), transparent 50% 0, black);
}

.glass-button .highlight-2-spot {
    opacity: calc(var(--highLightIntensity) / 2);
    mask-image: linear-gradient(calc(180deg - var(--lightAngle) * -1), transparent 80% 0, black);
}

.glass-button .gloss-1 {
    height: 60%;
    background: linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.4));
    border-radius: inherit;
    inset: 0;
    position: absolute;
    z-index: 0;
    mix-blend-mode: overlay;
}
/*!
(end glass-button.css)
*/


.button {
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 1rem;
}

/* New reusable button utilities */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  font-weight: 500;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition-duration: 150ms;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: light-dark(#ffffff, #111827);
    color: light-dark(#111827, #f9fafb);
    box-shadow: var(--en-shadow);
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}

.btn:disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    pointer-events: none;
    box-shadow: none;
}

/* Primary (filled) button */
.btn-primary {
    background-color: light-dark(#ffd2aa, #26198c);
    border-color: transparent;
    box-shadow: 0 6px 18px 0 light-dark(rgba(206,97,1,0.12), rgba(249,115,22,0.12));
}

.btn-primary:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px light-dark(rgba(206,97,1,0.16), rgba(249,115,22,0.16));
}

/* Secondary (neutral / outline) button */
.btn-secondary {
    background-color: light-dark(rgba(255,255,255,0.06), rgba(255,255,255,0.04));
    color: var(--foreground);
    border: 1px solid light-dark(#e3ca84, rgba(255,255,255,0.08));
    box-shadow: none;
}

.btn-secondary:hover {
    backdrop-filter: saturate(1.1) brightness(1.06);
    transform: translateY(-1px);
}

.btn-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px light-dark(rgba(160,140,120,0.12), rgba(255,255,255,0.06));
}

.glass-button-label {
  display: flex;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  font-size: 0.875rem;
  line-height: 1.25rem;
@media (width >= 64rem) {
    font-size: 1rem;
    line-height: 1.5rem;
}
}

.glass-button-edge {
    /* FIXME: Doesn't work since I can't figure out how to subtract the button from it. */
    background-color: #ffffff47;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: inherit;
    content: "";
    position: absolute;
    transform: translateX(-1rem) translateY(0.1rem);
    backdrop-filter: blur(0.5rem);
    z-index: -1;
}

.button>.icon:not(:only-child),
.glass-button-label>.icon:not(:only-child) {
  margin-right: 0.5rem;
}


/* noto-sans-regular - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/resources/fonts/noto-sans-v39-latin_latin-ext/noto-sans-v39-latin_latin-ext-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-italic - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 400;
    src: url('/resources/fonts/noto-sans-v39-latin_latin-ext/noto-sans-v39-latin_latin-ext-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-700 - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/resources/fonts/noto-sans-v39-latin_latin-ext/noto-sans-v39-latin_latin-ext-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-700italic - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 700;
    src: url('/resources/fonts/noto-sans-v39-latin_latin-ext/noto-sans-v39-latin_latin-ext-700italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* goudy-bookletter-1911-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Goudy Bookletter 1911';
    font-style: normal;
    font-weight: 400;
    src: url('/resources/fonts/goudy-bookletter-1911-v20-latin/goudy-bookletter-1911-v20-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-regular - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    src: url('/resources/fonts/eb-garamond-v31-latin_latin-ext/eb-garamond-v31-latin_latin-ext-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-italic - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    src: url('/resources/fonts/eb-garamond-v31-latin_latin-ext/eb-garamond-v31-latin_latin-ext-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-700 - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 700;
    src: url('/resources/fonts/eb-garamond-v31-latin_latin-ext/eb-garamond-v31-latin_latin-ext-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-700italic - latin_latin-ext */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 700;
    src: url('/resources/fonts/eb-garamond-v31-latin_latin-ext/eb-garamond-v31-latin_latin-ext-700italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-symbols-2-regular - symbols */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Symbols 2';
  font-style: normal;
  font-weight: 400;
  src: url('/resources/fonts/noto-sans-symbols-2-v25-symbols/noto-sans-symbols-2-v25-symbols-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
    color-scheme: light dark;
    overflow: hidden;
    container: dark / inline-size;

    /* Hackily using CSS container width queries as a variable that can be controlled for conditional styles later. Once CSS container style queries are in place, this can be changed to a CSS variable. */
    --foreground: light-dark(black, white);
    --background: light-dark(white, black);
}

html:not(.calculating-scrollbar-size) {
    width: 0;

    @container dark (width > 0) {
        width: 1px;
    }
}

html:has(#color-theme-setting-light:checked) {
    color-scheme: light;
    width: 0;
}

html:has(#color-theme-setting-dark:checked) {
    color-scheme: dark;
    width: 1px;
}

* {
    --en-shadow-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
    --en-shadow: var(--en-shadow-colored) !important;
}

@property --scrollbar {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

html {
    container-type: inline-size;
}

html,
body {
  margin: 0px;
  display: flex;
  height: 100%;
    color: var(--foreground);
    font-family: 'EB Garamond', serif;
}

body {
    background-image: url('/resources/Abstract-Polygon-Background-16x10.svg');
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
    min-width: 100vw;
    overflow: auto;

    @container dark (width > 0) {
        background-blend-mode: difference;
    }

    /* FIXME: This is broken by the use of width toggling on html to implement color theme switching. */
    /* --scrollbar: calc(100vw - 100cqw); */
}

h1 {
    font-size: 2.25rem;
    font-weight: 700;
    text-align: center;
    margin: 1rem 0;
}

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1rem 0;
}

h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 1rem 0;
}

body.content-loading {
    pointer-events: none;
}

body.content-loading::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    cursor: wait;
    pointer-events: auto;
}

.error-modal,
.tagline {
    font-family: 'EB Garamond', serif;
}

.error-modal>div {
    @media (width >=64rem) {
        transform: translateX(-50%) translateY(-50%);
    }
}

.white-black {
    background-color: light-dark(white, black);
    color: light-dark(black, white);
}

#modal-content-frame-container {
    min-height: calc(100vh - 4rem);
    margin: 1rem;
    width: calc(100vw - 4rem);
    position: absolute;
    z-index: 3;
    filter: drop-shadow(0px 0px 10px #f7f7f7);
    overflow: hidden;
}

#modal-content-frame-container:not(.hidden)+#modal-content-frame-backdrop {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block;
}

#modal-content-frame {
    width: 100%;
    height: 100%;
    flex-grow: 1;
    margin-top: 1rem;
    border: 4px inset;
    border-color: #ffe4c42b;
    backdrop-filter: brightness(1.8) saturate(0.5);
    box-shadow: 0px 0px 16px 0px light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8));
}

.tagline {
    font-size: small;
    text-align: left;
}

#nav,
button,
.button {
    font-family: 'Noto Sans', sans-serif;
}

#nav a.logo {
    transition: all 0.3s;
}

#nav a.logo>img {
    @container dark (width > 0) {
        filter: invert() hue-rotate(180deg);
    }
}

#nav a.logo:hover {
    filter: drop-shadow(0px 0px 10px #fff) drop-shadow(0px 0px 5px #fff);
    /*
   @container dark (width > 0) {
        filter: drop-shadow(0px 0px 10px #fff);
    }*/
}

.color-theme-setting {
    background-color: light-dark(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
    backdrop-filter: saturate(1.2) blur(1rem) brightness(1.1);
    border-width: 1px;
    border-style: solid;
    border-color: #e3ca8499;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    filter: drop-shadow(0px 0px 3px #fff);
}

input[name="color-theme-setting"]~label {
    position: relative;
    border-radius: 0.5rem;
    padding: 0.1rem;
    border: 1px solid transparent;
    transition: border 0.15s, filter 0.15s;
    cursor: pointer;
    /* overflow: hidden; */
}

input[name="color-theme-setting"]~label::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(211, 145, 255, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.15s;
}

input[name="color-theme-setting"]~label:hover::before {
    opacity: 1;
}

input[name="color-theme-setting"]~label:hover {
    filter: drop-shadow(0px 0px 2px #fcffea);
    border: 1px solid #ffcfcf99;
}

input[name="color-theme-setting"]:checked~label {
    backdrop-filter: brightness(1) saturate(8) brightness(1.2) blur(0.1rem);
    border: 1px solid #ffcfcf99;
}

.card {
    background-color: var(--background);
  border-radius: 0.5rem;
  padding: 1rem;
  --en-shadow: 0 4px 6px -1px var(--en-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--en-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow);
}

.card-warning {
    background-color: light-dark(oklch(0.971 0.013 17.38), #330000);
}

.page-content {
    border-radius: 2rem;
}

.card-translucent {
    background-color: light-dark(rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.6));
    backdrop-filter: saturate(1.2) blur(5rem) brightness(1.2);
    border-width: 1px;
    border-style: solid;
    border-color: #ffffff5c;
}

.home-section {
  margin-inline: 0px;
  margin-block: 2.5rem;
  padding-inline: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
@media (width >= 40rem) {
    padding-inline: 4rem;
}
@media (width >= 40rem) {
    padding-top: 2rem;
}
@media (width >= 40rem) {
    padding-bottom: 2rem;
}
@media (width >= 40rem) {
    margin-inline: 1rem;
}
    background-color: light-dark(white, black);
    box-shadow: 0px 2px 4px 0px light-dark(rgba(0, 0, 0, 0.58), rgba(255, 255, 255, 0.58));
    font-size: large;
    font-family: 'Goudy Bookletter 1911', serif;
}

.home-section h2 {
    text-align: center;
    font-size: 1.75rem;
    font-variant-caps: small-caps;
    color: light-dark(#a5836f, #f4f4a8);
}

.home-section-decoration::before {
    content: '🙠 ❦ 🙢';
    font-family: 'Noto Sans Symbols 2', serif;
    color: light-dark(#a5836f, #f4f4a8);
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.875rem;
  line-height: 2.25rem;
}

a:not(.button):not(.btn) {
    color: light-dark(blue, #5dbbff);
    text-decoration: underline;
}

.link-download,
.link-external {
    display: inline-flex;
    align-items: center;
    text-indent: 0;
}

.link-download::after,
.link-external::after {
    content: ' ';
    width: 1em;
    height: 1em;
    background-size: contain;
    background-position: center;
    margin-left: 0.25rem;
    filter: brightness(0) saturate(100%) invert(9%) sepia(100%) saturate(6466%) hue-rotate(247deg) brightness(90%) contrast(146%);

    @container dark (width > 0) {
        filter: brightness(0) saturate(100%) invert(79%) sepia(29%) saturate(7033%) hue-rotate(181deg) brightness(104%) contrast(103%);
    }
}

.link-external::after {
    margin-left: 0.1rem;
    background-image: url('/resources/icons/iconify_ei--external-link.svg');
}

.link-download::after {
    background-image: url('/resources/icons/iconify_ph--download-light.svg');
}

ul {
    list-style: disc;
  margin: 1rem;
  padding-left: 2.5rem;
}

p {
    /* font-family: serif; */
    text-indent: 2rem;
  margin-block: 0.5rem;
}

p.text-center {
    text-indent: 0;
}

.icon {
  display: inline-block;
  height: 1em;
}

.icon, .dark-invert {
    @container dark (width > 0) {
        filter: invert();
    }
}

input[type=text],
input[type=password] {
    border: 1px solid #ce6101;
    box-shadow: 1px 1px 2px 0px rgba(56, 0, 124, 0.75) inset;
    filter: drop-shadow(0px 0px 5px light-dark(#fff, #000));
    background-color: #d4ebff17;
    backdrop-filter: saturate(600%) brightness(1.1) blur(1.1rem) opacity(0.5);
  border-radius: 9999px;
  padding-inline: 0.75rem;
}

textarea,
select {
    background-color: rgba(242, 255, 255, 0.8);
    border: 1.5px groove;
    padding: 0.5rem;
    border-color: azure;
}

select {
    border-radius: 0.5rem;
    border: 1.5px groove;
    padding: 0.5rem;
    border-color: azure;
}

.page-content,
#nav {
  margin-inline: auto;
  max-width: 80rem;
}

.sidebar-js-enabled {
  position: fixed;
  z-index: 50;
  height: 100%;
  width: 16rem;
  overflow-y: auto;
  --en-shadow: 0 10px 15px -3px var(--en-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--en-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow);
    right: calc(var(--scrollbar) + 1rem);
    background-color: light-dark(rgba(255, 255, 255, 0.46), rgba(0, 0, 0, 0.46));
    backdrop-filter: saturate(300%) brightness(1.1) blur(1.2rem) opacity(0.9);
    border-radius: 1.5rem;
    border: 1px solid rgb(210, 210, 210);
    box-shadow: rgba(161, 161, 161, 0.75) 0px 0px 8px 0px;
    height: calc(-2rem + 100vh);
    top: 1rem;
}
.container:not(.increase-specificity) {
  width: 100%;
}

@media (width >= 40rem) {
  .container:not(.increase-specificity) {
    max-width: 40rem;
  }
}

@media (width >= 48rem) {
  .container:not(.increase-specificity) {
    max-width: 48rem;
  }
}

@media (width >= 64rem) {
  .container:not(.increase-specificity) {
    max-width: 64rem;
  }
}

@media (width >= 80rem) {
  .container:not(.increase-specificity) {
    max-width: 80rem;
  }
}

@media (width >= 96rem) {
  .container:not(.increase-specificity) {
    max-width: 96rem;
  }
}

.sr-only:not(.increase-specificity) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.absolute:not(.increase-specificity) {
  position: absolute;
}

.fixed:not(.increase-specificity) {
  position: fixed;
}

.z-10:not(.increase-specificity) {
  z-index: 10;
}

.m-4:not(.increase-specificity) {
  margin: 1rem;
}

.mx-0:not(.increase-specificity) {
  margin-inline: 0px;
}

.mx-auto:not(.increase-specificity) {
  margin-inline: auto;
}

.mt-6:not(.increase-specificity) {
  margin-top: 1.5rem;
}

.mt-8:not(.increase-specificity) {
  margin-top: 2rem;
}

.mr-4:not(.increase-specificity) {
  margin-right: 1rem;
}

.mb-2:not(.increase-specificity) {
  margin-bottom: 0.5rem;
}

.mb-3:not(.increase-specificity) {
  margin-bottom: 0.75rem;
}

.mb-4:not(.increase-specificity) {
  margin-bottom: 1rem;
}

.mb-6:not(.increase-specificity) {
  margin-bottom: 1.5rem;
}

.ml-2:not(.increase-specificity) {
  margin-left: 0.5rem;
}

.ml-auto:not(.increase-specificity) {
  margin-left: auto;
}

.block:not(.increase-specificity) {
  display: block;
}

.flex:not(.increase-specificity) {
  display: flex;
}

.grid:not(.increase-specificity) {
  display: grid;
}

.hidden:not(.increase-specificity) {
  display: none;
}

.h-1\/5:not(.increase-specificity) {
  height: 20%;
}

.h-4:not(.increase-specificity) {
  height: 1rem;
}

.h-6:not(.increase-specificity) {
  height: 1.5rem;
}

.h-\[1\.7rem\]:not(.increase-specificity) {
  height: 1.7rem;
}

.h-full:not(.increase-specificity) {
  height: 100%;
}

.h-screen:not(.increase-specificity) {
  height: 100vh;
}

.max-h-16:not(.increase-specificity) {
  max-height: 4rem;
}

.max-h-20:not(.increase-specificity) {
  max-height: 5rem;
}

.max-h-60:not(.increase-specificity) {
  max-height: 15rem;
}

.max-h-\[calc\(100\%-2rem\)\]:not(.increase-specificity) {
  max-height: calc(100% - 2rem);
}

.min-h-4:not(.increase-specificity) {
  min-height: 1rem;
}

.w-6:not(.increase-specificity) {
  width: 1.5rem;
}

.w-80:not(.increase-specificity) {
  width: 20rem;
}

.w-full:not(.increase-specificity) {
  width: 100%;
}

.w-screen:not(.increase-specificity) {
  width: 100vw;
}

.min-w-4:not(.increase-specificity) {
  min-width: 1rem;
}

.min-w-max:not(.increase-specificity) {
  min-width: max-content;
}

.max-w-\[100\%\]:not(.increase-specificity) {
  max-width: 100%;
}

.max-w-\[40rem\]:not(.increase-specificity) {
  max-width: 40rem;
}

.max-w-\[48rem\]:not(.increase-specificity) {
  max-width: 48rem;
}

.max-w-\[calc\(100\%\/3\)\]:not(.increase-specificity) {
  max-width: calc(100% / 3);
}

.max-w-full:not(.increase-specificity) {
  max-width: 100%;
}

.grow:not(.increase-specificity) {
  flex-grow: 1;
}

.transform:not(.increase-specificity) {
  transform: translate3d(var(--en-translate-x), var(--en-translate-y), var(--en-translate-z)) rotateX(var(--en-rotate-x)) rotateY(var(--en-rotate-y)) rotateZ(var(--en-rotate-z)) skewX(var(--en-skew-x)) skewY(var(--en-skew-y)) scale3d(var(--en-scale-x), var(--en-scale-y), var(--en-scale-z));
}

.resize:not(.increase-specificity) {
  resize: both;
}

.list-disc:not(.increase-specificity) {
  list-style-type: disc;
}

.list-none:not(.increase-specificity) {
  list-style-type: none;
}

.flex-col:not(.increase-specificity) {
  flex-direction: column;
}

.flex-row:not(.increase-specificity) {
  flex-direction: row;
}

.content-center:not(.increase-specificity) {
  align-content: center;
}

.items-center:not(.increase-specificity) {
  align-items: center;
}

.justify-around:not(.increase-specificity) {
  justify-content: space-around;
}

.justify-between:not(.increase-specificity) {
  justify-content: space-between;
}

.justify-center:not(.increase-specificity) {
  justify-content: center;
}

.justify-evenly:not(.increase-specificity) {
  justify-content: space-evenly;
}

.gap-2:not(.increase-specificity) {
  gap: 0.5rem;
}

.gap-4:not(.increase-specificity) {
  gap: 1rem;
}

.gap-x-4:not(.increase-specificity) {
  column-gap: 1rem;
}

.gap-y-4:not(.increase-specificity) {
  row-gap: 1rem;
}

.space-y-2 > :not(:last-child):not(.increase-specificity) {
  --en-space-y-reverse: 0;
  margin-block-start: calc(0.5rem * var(--en-space-y-reverse));
  margin-block-end: calc(0.5rem * calc(1 - var(--en-space-y-reverse)));
}

.space-y-4 > :not(:last-child):not(.increase-specificity) {
  --en-space-y-reverse: 0;
  margin-block-start: calc(1rem * var(--en-space-y-reverse));
  margin-block-end: calc(1rem * calc(1 - var(--en-space-y-reverse)));
}

.overflow-auto:not(.increase-specificity) {
  overflow: auto;
}

.whitespace-pre:not(.increase-specificity) {
  white-space: pre;
}

.whitespace-pre-wrap:not(.increase-specificity) {
  white-space: pre-wrap;
}

.break-words:not(.increase-specificity) {
  overflow-wrap: break-word;
}

.rounded-full:not(.increase-specificity) {
  border-radius: 9999px;
}

.rounded-t-lg:not(.increase-specificity) {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.border-b-2:not(.increase-specificity) {
  border-bottom-width: 2px;
}

.border-b-\[1rem\]:not(.increase-specificity) {
  border-bottom-width: 1rem;
}

.border-b-gray-300:not(.increase-specificity) {
  border-bottom-color: oklch(87.2% .01 258.338);
}

.border-b-transparent:not(.increase-specificity) {
  border-bottom-color: transparent;
}

.bg-\[\#3f8bff\]:not(.increase-specificity) {
  background-color: #3f8bff;
}

.bg-red-50:not(.increase-specificity) {
  background-color: oklch(97.1% .013 17.38);
}

.bg-rose-50:not(.increase-specificity) {
  background-color: oklch(96.9% .015 12.422);
}

.bg-white:not(.increase-specificity) {
  background-color: #fff;
}

.p-0:not(.increase-specificity) {
  padding: 0px;
}

.p-1:not(.increase-specificity) {
  padding: 0.25rem;
}

.p-2:not(.increase-specificity) {
  padding: 0.5rem;
}

.p-4:not(.increase-specificity) {
  padding: 1rem;
}

.p-5:not(.increase-specificity) {
  padding: 1.25rem;
}

.px-0:not(.increase-specificity) {
  padding-inline: 0px;
}

.py-1:not(.increase-specificity) {
  padding-block: 0.25rem;
}

.py-10:not(.increase-specificity) {
  padding-block: 2.5rem;
}

.py-4:not(.increase-specificity) {
  padding-block: 1rem;
}

.pt-4:not(.increase-specificity) {
  padding-top: 1rem;
}

.pr-2:not(.increase-specificity) {
  padding-right: 0.5rem;
}

.pb-4:not(.increase-specificity) {
  padding-bottom: 1rem;
}

.pl-4:not(.increase-specificity) {
  padding-left: 1rem;
}

.pl-5:not(.increase-specificity) {
  padding-left: 1.25rem;
}

.text-center:not(.increase-specificity) {
  text-align: center;
}

.text-left:not(.increase-specificity) {
  text-align: left;
}

.indent-0:not(.increase-specificity) {
  text-indent: 0px;
}

.font-mono:not(.increase-specificity) {
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl:not(.increase-specificity) {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl:not(.increase-specificity) {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-base:not(.increase-specificity) {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg:not(.increase-specificity) {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm:not(.increase-specificity) {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl:not(.increase-specificity) {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-semibold:not(.increase-specificity) {
  font-weight: 600;
}

.capitalize:not(.increase-specificity) {
  text-transform: capitalize;
}

.leading-6:not(.increase-specificity) {
  line-height: 1.5rem;
}

.leading-\[0\]:not(.increase-specificity) {
  line-height: 0;
}

.leading-none:not(.increase-specificity) {
  line-height: 1;
}

.leading-relaxed:not(.increase-specificity) {
  line-height: 1.625;
}

.shadow-md:not(.increase-specificity) {
  --en-shadow: 0 4px 6px -1px var(--en-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--en-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--en-inset-shadow, 0 0 #0000), var(--en-inset-ring-shadow, 0 0 #0000), var(--en-ring-offset-shadow, 0 0 #0000), var(--en-ring-shadow, 0 0 #0000), var(--en-shadow);
}

.backdrop-blur-sm:not(.increase-specificity) {
  --en-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
  backdrop-filter: var(--en-backdrop-blur) var(--en-backdrop-brightness) var(--en-backdrop-contrast) var(--en-backdrop-grayscale) var(--en-backdrop-hue-rotate) var(--en-backdrop-invert) var(--en-backdrop-opacity) var(--en-backdrop-saturate) var(--en-backdrop-sepia);
}

.ease-in-out:not(.increase-specificity) {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-\[bounce_2s_infinite_400ms\]:not(.increase-specificity) {
    -webkit-animation: bounce 2s infinite 400ms;
    animation: bounce 2s infinite 400ms;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-\[bounce_2s_infinite_200ms\]:not(.increase-specificity) {
    -webkit-animation: bounce 2s infinite 200ms;
    animation: bounce 2s infinite 200ms;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe\:animate-\[bounce_2s_infinite\]:not(.increase-specificity) {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
  }
}

@media (width >= 40rem) {
  .sm\:text-4xl:not(.increase-specificity) {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (width >= 40rem) {
  .sm\:px-4:not(.increase-specificity) {
    padding-inline: 1rem;
  }
}

@media (width >= 40rem) {
  .sm\:grid-cols-3:not(.increase-specificity) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width >= 40rem) {
  .sm\:grid-cols-2:not(.increase-specificity) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 40rem) {
  .sm\:gap-3:not(.increase-specificity) {
    gap: 0.75rem;
  }
}

@media (width >= 40rem) {
  .sm\:gap-12:not(.increase-specificity) {
    gap: 3rem;
  }
}

@media (width >= 40rem) {
  .sm\:flex-row:not(.increase-specificity) {
    flex-direction: row;
  }
}

@media (width >= 48rem) {
  .md\:w-10:not(.increase-specificity) {
    width: 2.5rem;
  }
}

@media (width >= 48rem) {
  .md\:w-1\/2:not(.increase-specificity) {
    width: 50%;
  }
}

@media (width >= 48rem) {
  .md\:py-4:not(.increase-specificity) {
    padding-block: 1rem;
  }
}

@media (width >= 48rem) {
  .md\:pr-4:not(.increase-specificity) {
    padding-right: 1rem;
  }
}

@media (width >= 48rem) {
  .md\:items-center:not(.increase-specificity) {
    align-items: center;
  }
}

@media (width >= 48rem) {
  .md\:h-10:not(.increase-specificity) {
    height: 2.5rem;
  }
}

@media (width >= 48rem) {
  .md\:grid-cols-2:not(.increase-specificity) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 48rem) {
  .md\:gap-6:not(.increase-specificity) {
    gap: 1.5rem;
  }
}

@media (width >= 48rem) {
  .md\:flex-row:not(.increase-specificity) {
    flex-direction: row;
  }
}

@media (width >= 64rem) {
  .lg\:w-1\/2:not(.increase-specificity) {
    width: 50%;
  }
}

@media (width >= 64rem) {
  .lg\:top-1\/2:not(.increase-specificity) {
    top: 50%;
  }
}

@media (width >= 64rem) {
  .lg\:mt-\[-1rem\]:not(.increase-specificity) {
    margin-top: -1rem;
  }
}

@media (width >= 64rem) {
  .lg\:ml-\[-1rem\]:not(.increase-specificity) {
    margin-left: -1rem;
  }
}

@media (width >= 64rem) {
  .lg\:left-1\/2:not(.increase-specificity) {
    left: 50%;
  }
}

@media (width >= 64rem) {
  .lg\:h-1\/2:not(.increase-specificity) {
    height: 50%;
  }
}

@media (width >= 64rem) {
  .lg\:flex-row:not(.increase-specificity) {
    flex-direction: row;
  }
}

@container dark (width > 0) {
  .dark\:bg-\[\#330000\]:not(.increase-specificity) {
    background-color: #330000;
  }
}