@keyframes fnAutoFill {
  to {
    font-family: inherit;
    font-size: inherit;
  }
}
@layer basics {
  :root {
    --site-global-shade: #1472a8;
    --inp-shade: var(--site-global-shade);
    --inp-shadow-in: inset 0 1px 3px #0000033;
    --inp-shadow-out: 0 1px 0 #ffffff33;
    --inp-shadow: var(--inp-shadow-in), var(--inp-shadow-out);
    --inp-size: 1em;
    --inp-pad-base: 1em;
    --inp-pad: calc(var(--inp-pad-base) * 0.8);
    --inp-height: 2em;
    --inp-cursor: initial;
    --inp-opacity: 1;
    --inp-placeholder-color: oklch(from var(--inp-shade) 0.5 0.052 h);
    --inp-placeholder-weight: 300;
    --inp-border-color: oklch(from var(--inp-shade) 0.35 0.052 h);
    --inp-border: 1px solid var(--inp-border-color);
    --inp-border-radius: 5px;
    --inp-back: oklch(from var(--inp-shade) 0.22 0.057 h);
    --inp-color: oklch(from var(--inp-shade) 0.77 0.057 h);
    --inp-back-disabled: oklch(from var(--inp-shade) 0.3 0.035 h);
    --inp-color-disabled: oklch(from var(--inp-shade) 0.87 0.057 h);
    --inp-placeholder-color-disabled: oklch(from var(--inp-shade) 0.8 0.052 h);
    --inp-border-color-disabled: oklch(from var(--inp-shade) 0.35 0.042 h);
    --inp-back-readonly: oklch(from var(--inp-shade) 0.33 0.039 h);
    --inp-color-readonly: oklch(from var(--inp-shade) 0.83 0.005 h);
    --inp-placeholder-color-readonly: oklch(from var(--inp-shade) 0.8 0.052 h);
    --inp-border-color-readonly: oklch(from var(--inp-shade) 0.44 0.046 h);
    --inp-back-error: oklch(0.38 0.17 27.78 / 0.31);
    --inp-color-error: oklch(0.67 0.14 23.37);
    --inp-placeholder-color-error: oklch(from var(--inp-shade) 0.8 0.052 h);
    --inp-border-color-error: oklch(from var(--inp-shade) 0.44 0.046 h);
    --inp-autofill-back: oklch(from var(--inp-shade) 0.23 0.057 101);
    --inp-autofill-color: oklch(from var(--inp-shade) 0.54 0.052 83);
    --check-size: calc(var(--inp-height) * 0.7);
    --check-height: var(--check-size);
    --check-width: calc(var(--check-size) * 2);
    --check-radius: calc(var(--check-size) * 2);
    --check-back: oklch(from var(--inp-shade) 0.22 0.057 h);
    --check-back-checked: oklch(from var(--inp-shade) 0.37 0.1 h);
    --check-border-color: var(--inp-border-color);
    --check-border-color-checked: oklch(from var(--check-border-color) l c h);
    --check-knob-size: calc(var(--check-size) * 0.727);
    --check-knob-offset: calc(var(--check-size) * 0.09);
    --check-knob-color: oklch(from var(--inp-shade) 0.62 0.057 h);
    --check-knob-color-checked: oklch(from var(--inp-shade) 0.82 0.057 h);
    --check-focus-ring: oklch(from var(--inp-shade) 0.22 0.057 h);
    --label-color: oklch(from var(--inp-shade) 0.77 0 0);
    --label-letter-spacing: 0.01em;
    --label-weight: 500;
    --sel-pad: 2em;
    --sel-back: var(--inp-back-disabled);
    --sel-border-top-color: oklch(from var(--inp-shade) 0.36 0.021 h);
    --sel-option-color: var(--inp-color);
    --sel-grad-1: oklch(from var(--sel-back) l c h);
    --sel-grad-2: oklch(from var(--sel-back) 0.27 c h);
  }
  :where(label,.label) {
    color: var(--label-color);
    letter-spacing: var(--label-letter-spacing);
    font-weight: var(--label-weight);
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], input[type=checkbox],input[type=radio],input[type='range'], select, textarea) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    box-sizing: border-box;
    position: relative;
    outline: none;
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], input[type=checkbox],input[type=radio],input[type='range'], select, textarea).error {
    --inp-back: var(--inp-back-error);
    --inp-color: var(--inp-color-error);
    --inp-placholder-color: var(--inp-placeholder-color-error);
    --inp-border-color: var(--inp-border-color-error);
    --check-border-color: var(--inp-border-color-error);
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea) {
    width: 100%;
    font-size: var(--inp-size);
    padding: var(--inp-pad);
    cursor: var(--inp-cursor);
    opacity: var(--inp-opacity);
    background: var(--inp-back);
    color: var(--inp-color);
    border-radius: var(--inp-border-radius);
    border: var(--inp-border);
    transition: all 0.2s ease-in-out;
    box-shadow: var(--inp-shadow);
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):autofill,
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):-webkit-autofill,
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):autofill:hover,
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):-webkit-autofill:hover,
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):autofill:focus,
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):-webkit-autofill:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
    font-size: inherit !important;
    animation-name: fnAutoFill;
    animation-fill-mode: forwards;
    background: var(--inp-autofill-back) !important;
    color: var(--inp-autofill-color);
    transition: background-color 5000s ease-in-out 0s, font-family 5000s;
    -webkit-text-fill-color: var(--inp-autofill-color) !important;
    -webkit-box-shadow: 0 0 0 10em var(--inp-autofill-back) inset !important;
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):not(textarea) {
    padding: calc(var(--inp-pad)*0.1) var(--inp-pad);
    height: var(--inp-height);
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea)::placeholder {
    color: var(--inp-placeholder-color);
    font-weight: var(--inp-placeholder-weight);
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea)[disabled=disabled] {
    --inp-back: var(--inp-back-disabled);
    --inp-color: var(--inp-color-disabled);
    --inp-border-color: var(--inp-border-color-disabled);
    --inp-placholder-color: var(--inp-placeholder-color-disabled);
    --inp-cursor: not-allowed;
    --inp-opacity: 0.8;
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea)[readonly] {
    --inp-back: var(--inp-back-readonly);
    --inp-color: var(--inp-color-readonly);
    --inp-border-color: var(--inp-border-color-readonly);
    --inp-placholder-color: var(--inp-placeholder-color-readonly);
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):hover {
    --inp-border-color: color-mix(in srgb, var(--inp-shade), #333 30%);
  }
  :where(input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password], select, textarea):focus {
    --inp-shadow-in: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    --inp-shadow-out: var(--inp-focus-ring);
    --inp-border-color: var(--inp-border-focus);
  }
  :where(select) {
    cursor: pointer;
    padding-right: var(--sel-pad);
    color: var(--inp-color);
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1em 1em" fill="none" stroke="white" opacity="0.3" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9"/></svg>'), linear-gradient(to bottom, var(--sel-grad-1), var(--sel-grad-2));
    background-repeat: no-repeat;
    background-position: right 0.8em bottom -0.2em, center;
    background-size: 1.4em, contain;
    border-top-color: var(--sel-border-top-color);
    transition: all 0.5s;
  }
  :where(select) option {
    color: var(--sel-option-color);
    background: var(--sel-grad-2);
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker) {
    cursor: pointer;
    align-items: center;
    vertical-align: middle;
    width: var(--check-width);
    height: var(--check-height);
    border-radius: var(--check-radius);
    background: var(--check-back);
    border: 1px solid var(--check-border-color);
    transition: all 0.2s ease-in-out;
    box-shadow: inset 1px 1px 2px #000000d6;
    position: relative;
    display: inline-flex;
    justify-content: center;
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker)::before {
    content: "";
    position: absolute;
    top: var(--check-knob-offset);
    left: var(--check-knob-offset);
    width: var(--check-knob-size);
    height: var(--check-knob-size);
    background-color: var(--check-knob-color);
    border-radius: 50%;
    box-shadow: inset 0 0 2px #ffffffaa;
    transition: all 0.2s ease-in-out;
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker):checked,
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker).active {
    --check-back: var(--check-back-checked);
    --check-border-color: var(--check-border-color-checked);
    --check-knob-color: var(--check-knob-color-checked);
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker):checked::before,
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker).active::before {
    transform: translateX(calc(var(--check-width) - var(--check-knob-size) - (var(--check-knob-offset) * 2)));
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker).checkbox {
    width: var(--check-height);
    border-radius: 3px;
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker).checkbox::before {
    border-radius: 2px;
    opacity: 0;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    width: 50%;
    height: 30%;
    top: 20%;
    left: 25%;
    background-color: transparent !important;
    box-shadow: none;
    transform: rotate(-45deg);
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker).checkbox:checked::before,
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker).checkbox.active::before {
    opacity: 1;
  }
  :where(input[type=checkbox],input[type=radio],input[type='range'], .checker):focus-visible {
    box-shadow: 0 0 0 2px var(--check-focus-ring);
  }
  /*


    :where(@{checks}, .checker) {
        cursor: pointer;
        align-items: center;
        vertical-align: middle;
        width: var(--check-width);
        height: var(--check-height);
        border-radius: var(--check-radius);
        background: var(--check-back);
        border: 1px solid var(--check-border-color);
        transition: all 0.2s ease-in-out;
        box-shadow: inset 1px 1px 2px #000000d6;
        position: relative;
        display: inline-flex;

        &::before {
            content: "";
            position: absolute;
            top: var(--check-knob-offset);
            left: var(--check-knob-offset);
            width: var(--check-knob-size);
            height: var(--check-knob-size);
            background-color: var(--check-knob-color);
            border-radius: 50%;
            box-shadow: inset 0 0 2px #ffffffaa;
            transition: all 0.2s ease-in-out;
        }

        &.checkbox {
            border-radius: 4px;

            &::before {
                border-radius: 2px;
            }
        }

        &:checked, &.active {
            --check-back: var(--check-back-checked);
            --check-border-color: var(--check-border-color-checked);
            --check-knob-color: var(--check-knob-color-checked);

            &::before {
                transform: translateX(calc(var(--check-width) - var(--check-knob-size) - (var(--check-knob-offset) * 2)));
            }
        }

        &.checkbox:checked, &.checkbox.active {
            &::before {
                transform: translateX(calc(var(--check-width) - var(--check-knob-size) - (var(--check-knob-offset) * 2)));
            }
        }

        &:focus-visible {
            box-shadow: 0 0 0 2px var(--check-focus-ring);
        }
    }

    :where(@{checks}, .checker) {
        cursor: pointer;
        align-items:center;
        vertical-align: middle;
        width: var(--check-width);
        height: var(--check-height);
        border-radius: var(--check-radius);
        background: var(--check-back);
        border: 1px solid var(--check-border-color);
        transition: all 0.2s ease-in-out;
        box-shadow: inset 1px 1px 2px #000000d6;

        &::before {
            content: "";
            position: absolute;
            top: var(--check-knob-offset);
            left: var(--check-knob-offset);
            width: var(--check-knob-size);
            height: var(--check-knob-size);
            background-color: var(--check-knob-color);
            border-radius: 50%;
            box-shadow: inset 0 0 2px #ffffffaa;
            transition: all 0.2s ease-in-out;
        }

        &:checked, &.active {
            --check-back: var(--check-back-checked);
            --check-border-color: var(--check-border-color-checked);
            --check-knob-color: var(--check-knob-color-checked);

            &::before {
                transform: translateX(calc(var(--check-width) - var(--check-knob-size) - (var(--check-knob-offset) * 2)));
            }
        }

        &:focus-visible {
            box-shadow: 0 0 0 2px var(--check-focus-ring);
        }
    }
     */
  :where(input[type="number"]) {
    -moz-appearance: textfield;
  }
  :where(input[type="number"])::-webkit-outer-spin-button,
  :where(input[type="number"])::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  :where(input[type="radio"], .checker.radio) {
    --check-width: var(--check-height);
    --check-knob-size: calc(var(--check-height) * 0.5);
  }
  :where(input[type="radio"], .checker.radio)::before {
    top: 50%;
    left: 50%;
    width: var(--check-knob-size);
    height: var(--check-knob-size);
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.5s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 50%;
  }
  :where(input[type="radio"], .checker.radio):checked::before,
  :where(input[type="radio"], .checker.radio).active::before {
    transform: translate(-50%, -50%) scale(1);
  }
  :where(input[type="range"]) {
    --range-color: var(--site-global-shade, #1d597b);
    --range-track-h: 6px;
    --range-thumb-s: 18px;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  :where(input[type="range"])::-webkit-slider-runnable-track {
    background: color-mix(in srgb, var(--range-color), #000 60%);
    height: var(--range-track-h);
    border-radius: var(--range-track-h);
    border: 1px solid color-mix(in srgb, var(--range-color), #fff 10%);
  }
  :where(input[type="range"])::-webkit-slider-thumb {
    appearance: none;
    margin-top: calc(var(--range-track-h) / -2 - 6px);
    height: var(--range-thumb-s);
    width: var(--range-thumb-s);
    background-color: color-mix(in srgb, #fff, var(--range-color) 25%);
    border-radius: 50%;
    border: 2px solid var(--range-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--range-color), transparent 60%);
  }
  :where(input[type="range"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--range-color), transparent 70%);
    outline-offset: 4px;
  }
  :where(.form-item) {
    --fi-description-color: oklch(from var(--inp-shade) 0.39 0.04 243);
    --fi-description-size: 0.83em;
    --fi-description-margin: 0.7em;
    --fi-label-margin: 0.6em;
    box-sizing: border-box;
  }
  :where(.form-item) label,
  :where(.form-item) .form-label {
    display: flex;
    box-sizing: border-box;
    margin-bottom: var(--fi-label-margin);
  }
  :where(.form-item) .description {
    color: var(--fi-description-color);
    font-size: var(--fi-description-size);
    margin-top: var(--fi-description-margin);
  }
  :root {
    --btn-size: calc(var(--inp-size) * 1.02);
    --btn-pad: calc(var(--inp-pad) * 0.4) calc(var(--inp-pad) * 1.2);
    --btn-radius: 4px;
    --btn-back: oklch(from var(--inp-shade) 0.29 0.039 h);
    --btn-color: oklch(from var(--inp-shade) 0.6 0.02 h);
    --btn-border-color: oklch(from var(--inp-shade) 0.35 0.046 h);
    --btn-shadow: 1px 1px 4px oklch(from var(--inp-shade) 0.05 0.02 h / 0.2);
    --btn-back-hover: oklch(from var(--inp-shade) 0.33 0.039 h);
    --btn-color-hover: oklch(from var(--inp-shade) 0.83 0.005 h);
    --btn-border-color-hover: oklch(from var(--inp-shade) 0.44 0.046 h);
    --btn-shadow-hover: 1px 1px 4px oklch(from var(--inp-shade) 0.05 0.02 h / 0.6);
  }
  :where(button,button[type=button],button[type=submit],button[type=reset],input[type=button],input[type=submit],input[type=reset],.form-submit,.form-reset,.as-button) {
    display: inline-flex;
    align-items: baseline;
    font-size: var(--btn-size);
    padding: var(--btn-pad);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: all 0.5s;
    gap: 0.6em;
    background: var(--btn-back);
    color: var(--btn-color);
    border: 1px solid var(--btn-border-color);
    box-shadow: var(--btn-shadow);
  }
  :where(button,button[type=button],button[type=submit],button[type=reset],input[type=button],input[type=submit],input[type=reset],.form-submit,.form-reset,.as-button):hover {
    --btn-back: var(--btn-back-hover);
    --btn-border-color: var(--btn-border-color-hover);
    --btn-color: var(--btn-color-hover);
    --btn-shadow: var(--btn-shadow-hover);
  }
  :where(.input-box) {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    width: auto;
  }
  :where(.input-box):not(:has(input[type=checkbox],input[type=radio],input[type='range'],button,button[type=button],button[type=submit],button[type=reset],input[type=button],input[type=submit],input[type=reset],.form-submit,.form-reset,.as-button)) {
    width: 100%;
  }
  :where(.input-box):has(input[type=checkbox],input[type=radio],input[type='range']) {
    width: auto;
  }
  :root {
    --inp-num-min-width: 3em;
    --inp-num-pad-left: var(--inp-pad);
    --inp-num-pad-right: var(--inp-pad);
    --inp-num-arrow-direction: column;
    --inp-num-arrow-gap: 1px;
    --inp-num-arrow-align: stretch;
    --inp-num-arrow-justify: stretch;
    --inp-num-arrow-inset: 0 0 0 auto;
    --inp-num-arrow-size: calc(var(--inp-size) * 0.7);
    --inp-num-arrow-width: calc(var(--inp-num-arrow-size) * 3);
    --inp-num-arrow-flex: 1 1 auto;
    --inp-num-arrow-back: oklch(from var(--inp-color) l c h / 0.1);
    --inp-num-arrow-color: oklch(from var(--inp-color) l c h / 0.8);
    --inp-num-arrow-back-hover: oklch(from var(--inp-color) l c h / 0.3);
    --inp-num-arrow-color-hover: oklch(from var(--inp-color) l c h);
    --inp-num-arrow-up-rotate: 0deg;
    --inp-num-arrow-up-order: 1;
    --inp-num-arrow-dn-rotate: 0deg;
    --inp-num-arrow-dn-order: 2;
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) input {
    padding-right: var(--inp-num-pad-right);
    padding-left: var(--inp-num-pad-left);
    min-width: var(--inp-num-min-width);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows {
    box-sizing: border-box;
    position: absolute;
    z-index: 5;
    height: 100%;
    overflow: hidden;
    border-radius: var(--inp-border-radius);
    inset: var(--inp-num-arrow-inset);
    display: flex;
    flex-direction: var(--inp-num-arrow-direction);
    gap: var(--inp-num-arrow-gap);
    align-items: var(--inp-num-arrow-align);
    justify-content: var(--inp-num-arrow-justify);
    border: 1px solid transparent;
    pointer-events: none;
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .up {
    order: var(--inp-num-arrow-up-order);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .up span {
    rotate: var(--inp-num-arrow-up-rotate);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .dn {
    order: var(--inp-num-arrow-dn-order);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .dn span {
    rotate: var(--inp-num-arrow-dn-rotate);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .up,
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .dn {
    user-select: none;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    line-height: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.5s;
    flex: var(--inp-num-arrow-flex);
    background: var(--inp-num-arrow-back);
    color: var(--inp-num-arrow-color);
    font-size: var(--inp-num-arrow-size);
    width: var(--inp-num-arrow-width);
    opacity: var(--inp-num-arrow-opacity);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .up:hover,
  :where(.input-box.as-number, .input-box:has(>input[type="number"])) .arrows .dn:hover {
    background: var(--inp-num-arrow-back-hover);
    color: var(--inp-num-arrow-color-hover);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"]))[data-mode="none"] .arrows {
    display: none;
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"])):not([data-mode]),
  :where(.input-box.as-number, .input-box:has(>input[type="number"]))[data-mode="normal"] {
    --inp-num-pad-right: calc(var(--inp-num-arrow-width) * 0.1);
  }
  :where(.input-box.as-number, .input-box:has(>input[type="number"]))[data-mode="flat"] {
    --inp-num-min-width: 1.5em;
    --inp-num-pad-right: calc(var(--inp-num-arrow-width) * 1.5);
    --inp-num-pad-left: calc(var(--inp-num-arrow-width) * 1.5);
    --inp-num-arrow-size: calc(var(--inp-size) * 1.2);
    --inp-num-arrow-inset: 0;
    --inp-num-arrow-direction: row;
    --inp-num-arrow-justify: space-between;
    --inp-num-arrow-flex: 0 0 auto;
    --inp-num-arrow-dn-rotate: 90deg;
    --inp-num-arrow-dn-order: 1;
    --inp-num-arrow-up-rotate: 90deg;
    --inp-num-arrow-up-order: 3;
  }
}
@layer basics {
  :root {
    --spd-drop: #33333333;
    --spd-backdrop: blur(3px);
    --spd-border: 1px solid #eee;
    --spd-back: #fff;
    --spd-color: #333;
    --spd-size: 1em;
    --spd-alt-size: 1em;
    --spd-title-size: 1.2em;
    --spd-width: 90%;
    --spd-max-width: 1200px;
    --spd-shadow: 0 0 0.6em #00000004;
    --spd-max-height: 100%;
    --spd-magin: 0;
    --spd-z-index: 5000;
    --spd-radius: 4px;
    --spd-pad: 1em;
    --spd-scrollbar-width: 10px;
    --spd-scrollbar-back: #eee;
    --spd-scrollbar-thumb-back: darkgray;
    --spd-scrollbar-thumb-outline: 1px solid slategrey;
    --spd-dismiss-cursor: pointer;
    --spd-dismiss-padding: 0 0.6em;
    --spd-dismiss-margin: 0;
    --spd-ajax-back: #ffffff10;
    --spd-ajax-z-index: 999;
    --spd-ajax-throbber-z-index: 9999;
    --spd-ajax-throbber-size: 50px;
    --spd-modal-throbber-size: 50px;
    --spd-alt-back: #eeeeee77;
    --spd-alt-border: 1px solid #e4e4e4;
    --spd-footer-align: right;
    --spd-closer-pad: 0;
    --spd-button-margin: 0 0 0 0.6em;
    --spd-button-shadow: 0 0 4px #00000044;
    --spd-button-shadow-hover: 0 0 4px #00000044;
  }
  :where(.simple-dialog) {
    --spd-body-padding: var(--spd-pad) var(--spd-pad);
    --spd-head-padding: calc(var(--spd-pad) * 0.5) var(--spd-pad);
    --spd-button-size: var(--spd-size);
    --spd-button-back: var(--spd-back);
    --spd-button-color: var(--spd-color);
    --spd-button-border-bolor: var(--spd-border-color);
    --spd-alt-color: var(--spd-color);
    --spd-button-back-hover: var(--spd-back);
    --spd-button-color-hover: var(--spd-color);
    --spd-button-border-bolor-hover: var(--spd-border-color);
    --spd-closer-size: calc(var(--spd-header-size) * 2);
    --spd-closer-color: var(--spd-header-color);
    --spd-body-back: var(--spd-back);
    --spd-body-size: var(--spd-alt-size);
    --spd-body-color: var(--spd-alt-color);
    --spd-header-back: var(--spd-alt-back);
    --spd-header-border: var(--spd-alt-border);
    --spd-header-size: var(--spd-alt-size);
    --spd-header-color: var(--spd-alt-color);
    --spd-footer-back: var(--spd-alt-back);
    --spd-footer-border: var(--spd-alt-border);
    --spd-footer-size: var(--spd-alt-size);
    --spd-footer-color: var(--spd-alt-color);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    background: var(--spd-drop);
    backdrop-filter: var(--spd-backdrop);
    z-index: var(--spd-z-index);
    overflow: hidden;
    align-items: center;
    justify-content: center;
    color: var(--spd-color);
  }
  :where(.simple-dialog).animated {
    opacity: 0;
  }
  @keyframes income {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes income-dlg {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    70% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes outgo {
    0% {
      opacity: 1;
      margin-left: 0;
    }
    99% {
      opacity: 0;
      margin-left: 0;
    }
    100% {
      margin-left: 100000px;
      display: none;
    }
  }
  @keyframes outgo-dlg {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
      opacity: 0;
    }
  }
  :where(.simple-dialog).animated.opened {
    animation: income 0.1s 0s 1 normal forwards;
  }
  :where(.simple-dialog).animated.opened .dialog {
    animation: income-dlg 0.3s 0s 1 normal forwards;
  }
  :where(.simple-dialog).animated.closed {
    animation: outgo 0.5s 0s 1 normal forwards;
  }
  :where(.simple-dialog).animated.closed .dialog {
    animation: outgo-dlg 0.3s 0s 1 normal forwards;
  }
  :where(.simple-dialog).transparent {
    background: transparent;
  }
  :where(.simple-dialog).closed {
    overflow: hidden;
    width: 0;
    height: 0;
  }
  :where(.simple-dialog).alert {
    --spd-back: #5b2a1f;
    --spd-color: #e3c8c8;
    --spd-alt-back: #ffffff42;
    --spd-border: 5px solid #6f381c;
    --spd-alt-border: 1px solid #4f2626;
    --spd-alt-size: 0.9em;
  }
  :where(.simple-dialog) button {
    margin: var(--spd-button-margin);
    font-size: var(--spd-button-size);
    background: var(--spd-button-back);
    color: var(--spd-button-color);
    border: 1px solid var(--spd-button-border-color);
    box-shadow: var(--spd-button-shadow);
  }
  :where(.simple-dialog) button:hover {
    --spd-button-back: var(--spd-button-back-hover);
    --spd-button-color: var(--spd-button-color-hover);
    --spd-button-border-bolor: var(--spd-button-border-color-hover);
    --spd-button-shadow: var(--spd-button-shadow-hover);
  }
  :where(.simple-dialog) .close,
  :where(.simple-dialog) .dismiss {
    cursor: var(--spd-dismiss-cursor);
    padding: var(--spd-dismiss-padding);
    margin: var(--spd-dismiss-margin);
  }
  :where(.simple-dialog) closer,
  :where(.simple-dialog) .closer {
    font-size: var(--spd-closer-size);
    color: var(--spd-closer-color);
    padding: var(--spd-closer-pad);
  }
  :where(.simple-dialog) closer:empty:before,
  :where(.simple-dialog) .closer:empty:before {
    content: '×';
  }
  :where(.simple-dialog) .dialog-title {
    flex: 1 1 auto;
    font-size: var(--spd-title-size);
  }
  :where(.simple-dialog) .dialog-dropper,
  :where(.simple-dialog) dropper {
    position: fixed;
    inset: 0;
    z-index: 1;
  }
  :where(.simple-dialog) > .modal,
  :where(.simple-dialog) > .dialog {
    background: var(--spd-back);
    border: var(--spd-border);
    width: var(--spd-width);
    max-width: var(--spd-max-width);
    box-shadow: var(--spd-shadow);
    display: flex;
    flex-direction: column;
    max-height: var(--spd-max-height);
    margin: var(--spd-margin);
    border-radius: var(--spd-radius);
    z-index: 10;
  }
  :where(.simple-dialog) > .modal.wide,
  :where(.simple-dialog) > .dialog.wide {
    --spd-width: 100%;
    --spd-max-width: 100%;
    --spd-margin: 0 0.6em;
  }
  :where(.simple-dialog) > .modal.small,
  :where(.simple-dialog) > .dialog.small {
    --spd-max-width: 500px;
  }
  :where(.simple-dialog) > .modal.medium,
  :where(.simple-dialog) > .dialog.medium {
    --spd-max-width: 1200px;
  }
  :where(.simple-dialog) > .modal.mini,
  :where(.simple-dialog) > .dialog.mini {
    --spd-max-width: 350px;
  }
  :where(.simple-dialog) > .modal.warning,
  :where(.simple-dialog) > .dialog.warning {
    --spd-back: #79573e;
    --spd-color: #d3c7bf;
    --spd-alt-back: #ffffff42;
    --spd-border: 5px solid #5f3d1e;
    --spd-alt-border: 1px solid #4f2626;
    --spd-alt-size: 0.9em;
  }
  :where(.simple-dialog) header,
  :where(.simple-dialog) footer,
  :where(.simple-dialog) .dialog-header,
  :where(.simple-dialog) .dialog-footer {
    padding: var(--spd-head-padding);
    flex: 0 0 auto;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
  }
  :where(.simple-dialog) header .fill,
  :where(.simple-dialog) footer .fill,
  :where(.simple-dialog) .dialog-header .fill,
  :where(.simple-dialog) .dialog-footer .fill {
    flex: 1 1 auto;
  }
  :where(.simple-dialog) header,
  :where(.simple-dialog) .dialog-header {
    font-size: var(--spd-header-size);
    background: var(--spd-header-back);
    border-bottom: var(--spd-header-border);
    color: var(--spd-header-color);
    border-start-start-radius: var(--spd-radius);
    border-start-end-radius: var(--spd-radius);
  }
  :where(.simple-dialog) footer,
  :where(.simple-dialog) .dialog-footer {
    font-size: var(--spd-footer-size);
    background: var(--spd-footer-back);
    border-top: var(--spd-footer-border);
    color: var(--spd-footer-color);
    border-end-start-radius: var(--spd-radius);
    border-end-end-radius: var(--spd-radius);
    text-align: var(--spd-footer-align);
    justify-content: flex-end;
  }
  :where(.simple-dialog) footer button,
  :where(.simple-dialog) .dialog-footer button {
    margin-right: var(--spd-button-margin);
  }
  :where(.simple-dialog) main,
  :where(.simple-dialog) .dialog-body {
    padding: var(--spd-body-padding);
    flex: 1 1 auto;
    overflow-y: auto;
    font-size: var(--spd-body-size);
    background: var(--spd-body-back);
    color: var(--spd-body-color);
  }
  :where(.simple-dialog) main::-webkit-scrollbar,
  :where(.simple-dialog) .dialog-body::-webkit-scrollbar {
    width: var(--spd-scrollbar-width);
  }
  :where(.simple-dialog) main::-webkit-scrollbar-track,
  :where(.simple-dialog) .dialog-body::-webkit-scrollbar-track {
    background: var(--spd-scrollbar-back);
  }
  :where(.simple-dialog) main::-webkit-scrollbar-thumb,
  :where(.simple-dialog) .dialog-body::-webkit-scrollbar-thumb {
    background-color: var(--spd-scrollbar-thumb-back);
    outline: var(--spd-scrollbar-thumb-outline);
  }
  :where(.simple-dialog) .ajax-progress-throbber {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--spd-ajax-back);
    z-index: var(--spd-ajax-z-index);
  }
  :where(.simple-dialog) .ajax-progress-throbber .throbber {
    position: fixed;
    left: 50%;
    top: 45%;
    z-index: var(--spd-ajax-throbber-z-index);
    display: inline-block;
    text-align: center;
    transform-origin: 50%;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
  }
  :where(.simple-dialog) .ajax-progress-throbber .throbber,
  :where(.simple-dialog) .ajax-progress-throbber .throbber:after {
    width: var(--spd-ajax-throbber-size);
    height: var(--spd-ajax-throbber-size);
    font-size: var(--spd-ajax-throbber-size);
    line-height: var(--spd-ajax-throbber-size);
  }
  :where(.simple-dialog) .ajax-progress-throbber .throbber:after {
    font-family: FontAwesome, sans-serif;
    content: '\f110';
    color: rgba(59, 102, 174, 0.5);
    position: absolute;
    display: inline-block;
    left: 0;
  }
  :where(.simple-dialog).iframed {
    --spd-iframed-z-index: 555555;
    --spd-iframed-width: 94%;
    --spd-iframed-max-width: 100%;
    --spd-iframed-height: 95vh;
    --spd-iframed-border: 4px solid #fdfdfd;
    --spd-iframed-footer-align: right;
    z-index: var(--spd-iframed-z-index);
  }
  :where(.simple-dialog).iframed > .modal,
  :where(.simple-dialog).iframed > .dialog {
    width: var(--spd-iframed-width);
    max-width: var(--spd-iframed-max-width);
    height: var(--spd-iframed-height);
  }
  :where(.simple-dialog).iframed .dialog-body {
    overflow: hidden;
    position: relative;
  }
  :where(.simple-dialog).iframed .dialog-body iframe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: var(--spd-iframed-border);
  }
  :where(.simple-dialog).iframed .dialog-footer {
    text-align: var(--spd-iframed-footer-align);
  }
  :where(.simple-dialog) pre.sf-dump {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :where(.simple-dialog).sf-dialog {
    --spd-size: 0.9em;
    --spd-border: 5px solid #674936;
    --spd-alt-border: 1px solid #251313;
    --spd-back: #140000;
    line-height: 1.2em;
  }
  :where(.simple-dialog).sf-dialog .placeholder {
    padding: 0;
    border: none;
    box-shadow: none;
  }
  @media only screen and (min-width: 0) and (max-width: 767px) {
    :where(.simple-dialog) .modal,
    :where(.simple-dialog) .dialog {
      --spd-width: 100%;
      --spd-margin: 1em;
    }
  }
  :where(.dialog-opened) {
    overflow: hidden;
    height: 101vh;
  }
}