:root {
/** Colors */
  --system-accent-color: #4ecdc4;
  --system-accent-color-dark1: #3ac7bd;
  --system-accent-color-dark2: #36b1a9;
  --system-accent-color-dark3: #2d968f;
  --system-accent-color-light1: #52e1d7;
  --system-accent-color-light2: #55f8ec;
  --system-accent-color-light3: #86eae3;
  --system-alt-high-color: #fff;
  --system-alt-low-color: rgba(255,255,255,0.2);
  --system-alt-medium-color: rgba(255,255,255,0.6);
  --system-alt-medium-high-color: rgba(255,255,255,0.8);
  --system-alt-medium-low-color: rgba(255,255,255,0.4);
  --system-base-high-color: #000;
  --system-base-low-color: rgba(0,0,0,0.2);
  --system-base-medium-color: rgba(0,0,0,0.6);
  --system-base-medium-high-color: rgba(0,0,0,0.8);
  --system-base-medium-low-color: rgba(0,0,0,0.4);
  --system-chrome-alt-low-color: #171717;
  --system-chrome-black-high-color: #000;
  --system-chrome-black-low-color: rgba(0,0,0,0.2);
  --system-chrome-black-medium-low-color: rgba(0,0,0,0.4);
  --system-chrome-black-medium-color: rgba(0,0,0,0.8);
  --system-chrome-disabled-high-color: #ccc;
  --system-chrome-disabled-low-color: #7a7a7a;
  --system-chrome-high-color: #ccc;
  --system-chrome-low-color: #f2f2f2;
  --system-chrome-medium-color: #e6e6e6;
  --system-chrome-medium-low-color: #f2f2f2;
  --system-chrome-white-color: #fff;
  --system-chrome-gray-color: #767676;
  --system-list-low-color: rgba(0,0,0,0.098);
  --system-list-medium-color: rgba(0,0,0,0.2);
  --system-error-text-color: #c50500;
  --text-fill-color-primary: rgba(0,0,0,0.894);
  --text-fill-color-secondary: rgba(0,0,0,0.62);
  --text-fill-color-tertiary: rgba(0,0,0,0.447);
  --text-fill-color-disabled: rgba(0,0,0,0.361);
  --text-fill-color-inverse: #fff;
  --accent-text-fill-color-primary: #36b1a9;
  --accent-text-fill-color-secondary: #2d968f;
  --accent-text-fill-color-tertiary: #3ac7bd;
  --accent-text-fill-color-disabled: rgba(0,0,0,0.361);
  --text-on-accent-fill-color-selected-text: #fff;
  --text-on-accent-fill-color-primary: #fff;
  --text-on-accent-fill-color-secondary: rgba(255,255,255,0.702);
  --text-on-accent-fill-color-disabled: #fff;
  --control-fill-color-default: rgba(255,255,255,0.702);
  --control-fill-color-secondary: rgba(249,249,249,0.502);
  --control-fill-color-tertiary: rgba(249,249,249,0.302);
  --control-fill-color-disabled: rgba(249,249,249,0.302);
  --control-fill-color-transparent: rgba(255,255,255,0);
  --control-fill-color-input-active: #fff;
  --control-strong-fill-color-default: rgba(0,0,0,0.447);
  --control-strong-fill-color-disabled: rgba(0,0,0,0.318);
  --control-solid-fill-color-default: #fff;
  --subtle-fill-color-transparent: rgba(255,255,255,0);
  --subtle-fill-color-secondary: rgba(0,0,0,0.035);
  --subtle-fill-color-tertiary: rgba(0,0,0,0.024);
  --subtle-fill-color-disabled: rgba(255,255,255,0);
  --control-alt-fill-color-transparent: rgba(255,255,255,0);
  --control-alt-fill-color-secondary: rgba(0,0,0,0.024);
  --control-alt-fill-color-tertiary: rgba(0,0,0,0.059);
  --control-alt-fill-color-quarternary: rgba(0,0,0,0.094);
  --control-alt-fill-color-disabled: rgba(255,255,255,0);
  --control-on-image-fill-color-default: rgba(255,255,255,0.788);
  --control-on-image-fill-color-secondary: #f3f3f3;
  --control-on-image-fill-color-tertiary: #ebebeb;
  --control-on-image-fill-color-disabled: rgba(255,255,255,0);
  --accent-fill-color-default: #3ac7bd;
  --accent-fill-color-secondary: rgba(58,199,189,0.9);
  --accent-fill-color-tertiary: rgba(58,199,189,0.8);
  --accent-fill-color-disabled: rgba(0,0,0,0.216);
  --control-stroke-color-default: rgba(0,0,0,0.059);
  --control-stroke-color-secondary: rgba(0,0,0,0.161);
  --control-stroke-color-on-accent-default: rgba(255,255,255,0.078);
  --control-stroke-color-on-accent-secondary: rgba(0,0,0,0.4);
  --control-stroke-color-on-accent-tertiary: rgba(0,0,0,0.216);
  --control-stroke-color-on-accent-disabled: rgba(0,0,0,0.059);
  --control-stroke-color-for-strong-fill-when-on-image: rgba(255,255,255,0.349);
  --card-stroke-color-default: rgba(0,0,0,0.059);
  --card-stroke-color-default-solid: #ebebeb;
  --control-strong-stroke-color-default: rgba(0,0,0,0.447);
  --control-strong-stroke-color-disabled: rgba(0,0,0,0.216);
  --surface-stroke-color-default: rgba(117,117,117,0.4);
  --surface-stroke-color-flyout: rgba(0,0,0,0.059);
  --surface-stroke-color-inverse: rgba(255,255,255,0.082);
  --divider-stroke-color-default: rgba(0,0,0,0.059);
  --focus-stroke-color-outer: rgba(0,0,0,0.894);
  --focus-stroke-color-inner: rgba(255,255,255,0.702);
  --card-background-fill-color-default: rgba(255,255,255,0.702);
  --card-background-fill-color-secondary: rgba(246,246,246,0.502);
  --smoke-fill-color-default: rgba(0,0,0,0.302);
  --layer-fill-color-default: rgba(255,255,255,0.502);
  --layer-fill-color-alt: #fff;
  --layer-on-acrylic-fill-color-default: rgba(255,255,255,0.251);
  --layer-on-accent-acrylic-fill-color-default: rgba(255,255,255,0.251);
  --layer-on-mica-base-alt-fill-color-default: rgba(255,255,255,0.702);
  --layer-on-mica-base-alt-fill-color-secondary: rgba(0,0,0,0.039);
  --layer-on-mica-base-alt-fill-color-tertiary: #f9f9f9;
  --layer-on-mica-base-alt-fill-color-transparent: rgba(0,0,0,0);
  --solid-background-fill-color-base: #f3f3f3;
  --solid-background-fill-color-secondary: #eee;
  --solid-background-fill-color-tertiary: #f9f9f9;
  --solid-background-fill-color-quarternary: #fff;
  --solid-background-fill-color-transparent: rgba(243,243,243,0);
  --solid-background-fill-color-base-alt: #dadada;
  --system-fill-color-success: #0f7b0f;
  --system-fill-color-caution: #9d5d00;
  --system-fill-color-critical: #c42b1c;
  --system-fill-color-neutral: rgba(0,0,0,0.447);
  --system-fill-color-solid-neutral: #8a8a8a;
  --system-fill-color-attention-background: rgba(246,246,246,0.502);
  --system-fill-color-success-background: #dff6dd;
  --system-fill-color-caution-background: #fff4ce;
  --system-fill-color-critical-background: #fde7e9;
  --system-fill-color-neutral-background: rgba(0,0,0,0.024);
  --system-fill-color-solid-attention-background: #f7f7f7;
  --system-fill-color-solid-neutral-background: #f3f3f3;
  --text-on-accent-fill-color-default: #fff;
  --text-on-accent-a-a-fill-color-primary: #000;
  --text-on-accent-a-a-fill-color-secondary: rgba(0,0,0,0.502);
  --text-on-accent-a-a-fill-color-disabled: rgba(255,255,255,0.529);
  --control-a-a-fill-color-default: rgba(255,255,255,0.545);
  --control-a-a-fill-color-disabled: rgba(255,255,255,0.247);
  --accent-a-a-fill-color-disabled: rgba(255,255,255,0.157);
  --control-stroke-color-for-a-a-fill-on-image: rgba(0,0,0,0.42);
  --control-a-a-stroke-color-default: rgba(255,255,255,0.545);
  --control-a-a-stroke-color-disabled: rgba(255,255,255,0.157);
  --control-elevation-border-brush: linear-gradient(rgba(0,0,0,0.059) 91%, rgba(0,0,0,0.161));
  --circle-elevation-border-brush: linear-gradient(rgba(0,0,0,0.059) 50%, rgba(0,0,0,0.161) 95%);
  --accent-control-elevation-border-brush: linear-gradient(rgba(255,255,255,0.078) 91%, rgba(0,0,0,0.4));
  --highlight-background: #f3f3f3;
  --highlight-foreground: #444;
  --highlight-gutter-background: #e1e1e1;
  --highlight-gutter-foreground: #555;
/** Common */
  --control-corner-radius: 4px;
  --overlay-corner-radius: 8px;
/** Font Size */
  --content-control-font-size: 14px;
  --text-style-large-font-size: 18.14px;
  --text-style-extra-large-font-size: 25.5px;
  --pivot-header-item-font-size: 24px;
  --caption-text-block-font-size: 12px;
  --body-text-block-font-size: 14px;
  --subtitle-text-block-font-size: 20px;
  --title-text-block-font-size: 28px;
  --title-large-text-block-font-size: 40px;
  --display-text-block-font-size: 68px;
/** Font Family */
  --body-font: Segoe UI Variable, Segoe UI, sans-serif;
  --code-font-family: "Cascadia Code NF", "Cascadia Code PL", "Cascadia Code", Consolas, "Courier New", "Liberation Mono", SFMono-Regular, Menlo, Monaco, monospace;
  --csstools-color-scheme--light: initial;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --system-alt-high-color: #000;
    --system-alt-low-color: rgba(0,0,0,0.2);
    --system-alt-medium-color: rgba(0,0,0,0.6);
    --system-alt-medium-high-color: rgba(0,0,0,0.8);
    --system-alt-medium-low-color: rgba(0,0,0,0.4);
    --system-base-high-color: #fff;
    --system-base-low-color: rgba(255,255,255,0.2);
    --system-base-medium-color: rgba(255,255,255,0.6);
    --system-base-medium-high-color: rgba(255,255,255,0.8);
    --system-base-medium-low-color: rgba(255,255,255,0.4);
    --system-chrome-alt-low-color: #f2f2f2;
    --system-chrome-black-high-color: #000;
    --system-chrome-black-low-color: rgba(0,0,0,0.2);
    --system-chrome-black-medium-low-color: rgba(0,0,0,0.4);
    --system-chrome-black-medium-color: rgba(0,0,0,0.8);
    --system-chrome-disabled-high-color: #333;
    --system-chrome-disabled-low-color: #858585;
    --system-chrome-high-color: #767676;
    --system-chrome-low-color: #171717;
    --system-chrome-medium-color: #1f1f1f;
    --system-chrome-medium-low-color: #2b2b2b;
    --system-chrome-white-color: #fff;
    --system-chrome-gray-color: #767676;
    --system-list-low-color: rgba(255,255,255,0.098);
    --system-list-medium-color: rgba(255,255,255,0.2);
    --system-error-text-color: #fff000;
    --text-fill-color-primary: #fff;
    --text-fill-color-secondary: rgba(255,255,255,0.773);
    --text-fill-color-tertiary: rgba(255,255,255,0.529);
    --text-fill-color-disabled: rgba(255,255,255,0.365);
    --text-fill-color-inverse: rgba(0,0,0,0.894);
    --accent-text-fill-color-primary: #86eae3;
    --accent-text-fill-color-secondary: #86eae3;
    --accent-text-fill-color-tertiary: #55f8ec;
    --accent-text-fill-color-disabled: rgba(255,255,255,0.365);
    --text-on-accent-fill-color-selected-text: #fff;
    --text-on-accent-fill-color-primary: #000;
    --text-on-accent-fill-color-secondary: rgba(0,0,0,0.502);
    --text-on-accent-fill-color-disabled: rgba(255,255,255,0.529);
    --control-fill-color-default: rgba(255,255,255,0.059);
    --control-fill-color-secondary: rgba(255,255,255,0.082);
    --control-fill-color-tertiary: rgba(255,255,255,0.031);
    --control-fill-color-disabled: rgba(255,255,255,0.043);
    --control-fill-color-transparent: rgba(255,255,255,0);
    --control-fill-color-input-active: rgba(30,30,30,0.702);
    --control-strong-fill-color-default: rgba(255,255,255,0.545);
    --control-strong-fill-color-disabled: rgba(255,255,255,0.247);
    --control-solid-fill-color-default: #454545;
    --subtle-fill-color-transparent: rgba(255,255,255,0);
    --subtle-fill-color-secondary: rgba(255,255,255,0.059);
    --subtle-fill-color-tertiary: rgba(255,255,255,0.039);
    --subtle-fill-color-disabled: rgba(255,255,255,0);
    --control-alt-fill-color-transparent: rgba(255,255,255,0);
    --control-alt-fill-color-secondary: rgba(0,0,0,0.098);
    --control-alt-fill-color-tertiary: rgba(255,255,255,0.043);
    --control-alt-fill-color-quarternary: rgba(255,255,255,0.071);
    --control-alt-fill-color-disabled: rgba(255,255,255,0);
    --control-on-image-fill-color-default: rgba(28,28,28,0.702);
    --control-on-image-fill-color-secondary: #1a1a1a;
    --control-on-image-fill-color-tertiary: #131313;
    --control-on-image-fill-color-disabled: #1e1e1e;
    --accent-fill-color-default: #55f8ec;
    --accent-fill-color-secondary: rgba(85,248,236,0.9);
    --accent-fill-color-tertiary: rgba(85,248,236,0.8);
    --accent-fill-color-disabled: rgba(255,255,255,0.157);
    --control-stroke-color-default: rgba(255,255,255,0.071);
    --control-stroke-color-secondary: rgba(255,255,255,0.094);
    --control-stroke-color-on-accent-default: rgba(255,255,255,0.078);
    --control-stroke-color-on-accent-secondary: rgba(0,0,0,0.137);
    --control-stroke-color-on-accent-tertiary: rgba(0,0,0,0.216);
    --control-stroke-color-on-accent-disabled: rgba(0,0,0,0.2);
    --control-stroke-color-for-strong-fill-when-on-image: rgba(0,0,0,0.42);
    --card-stroke-color-default: rgba(0,0,0,0.098);
    --card-stroke-color-default-solid: #1c1c1c;
    --control-strong-stroke-color-default: rgba(255,255,255,0.545);
    --control-strong-stroke-color-disabled: rgba(255,255,255,0.157);
    --surface-stroke-color-default: rgba(117,117,117,0.4);
    --surface-stroke-color-flyout: rgba(0,0,0,0.2);
    --surface-stroke-color-inverse: rgba(0,0,0,0.059);
    --divider-stroke-color-default: rgba(255,255,255,0.082);
    --focus-stroke-color-outer: #fff;
    --focus-stroke-color-inner: rgba(0,0,0,0.702);
    --card-background-fill-color-default: rgba(255,255,255,0.051);
    --card-background-fill-color-secondary: rgba(255,255,255,0.031);
    --smoke-fill-color-default: rgba(0,0,0,0.302);
    --layer-fill-color-default: rgba(58,58,58,0.298);
    --layer-fill-color-alt: rgba(255,255,255,0.051);
    --layer-on-acrylic-fill-color-default: rgba(255,255,255,0.035);
    --layer-on-accent-acrylic-fill-color-default: rgba(255,255,255,0.035);
    --layer-on-mica-base-alt-fill-color-default: rgba(58,58,58,0.451);
    --layer-on-mica-base-alt-fill-color-secondary: rgba(255,255,255,0.059);
    --layer-on-mica-base-alt-fill-color-tertiary: #2c2c2c;
    --layer-on-mica-base-alt-fill-color-transparent: rgba(255,255,255,0);
    --solid-background-fill-color-base: #202020;
    --solid-background-fill-color-secondary: #1c1c1c;
    --solid-background-fill-color-tertiary: #282828;
    --solid-background-fill-color-quarternary: #2c2c2c;
    --solid-background-fill-color-transparent: rgba(32,32,32,0);
    --solid-background-fill-color-base-alt: #0a0a0a;
    --system-fill-color-success: #6ccb5f;
    --system-fill-color-caution: #fce100;
    --system-fill-color-critical: #ff99a4;
    --system-fill-color-neutral: rgba(255,255,255,0.545);
    --system-fill-color-solid-neutral: #9d9d9d;
    --system-fill-color-attention-background: rgba(255,255,255,0.031);
    --system-fill-color-success-background: #393d1b;
    --system-fill-color-caution-background: #433519;
    --system-fill-color-critical-background: #442726;
    --system-fill-color-neutral-background: rgba(255,255,255,0.031);
    --system-fill-color-solid-attention-background: #2e2e2e;
    --system-fill-color-solid-neutral-background: #2e2e2e;
    --text-on-accent-fill-color-default: $text-on-accent-fill-color-default-dark;
    --text-on-accent-a-a-fill-color-primary: $text-on-accent-a-a-fill-color-primary-dark;
    --text-on-accent-a-a-fill-color-secondary: $text-on-accent-a-a-fill-color-secondary-dark;
    --text-on-accent-a-a-fill-color-disabled: $text-on-accent-a-a-fill-color-disabled-dark;
    --control-a-a-fill-color-default: $control-a-a-fill-color-default-dark;
    --control-a-a-fill-color-disabled: $control-a-a-fill-color-disabled-dark;
    --accent-a-a-fill-color-disabled: $accent-a-a-fill-color-disabled-dark;
    --control-stroke-color-for-a-a-fill-on-image: $control-stroke-color-for-a-a-fill-on-image-dark;
    --control-a-a-stroke-color-default: $control-a-a-stroke-color-default-dark;
    --control-a-a-stroke-color-disabled: $control-a-a-stroke-color-disabled-dark;
    --control-elevation-border-brush: linear-gradient(rgba(255,255,255,0.094), rgba(255,255,255,0.071) 10%);
    --circle-elevation-border-brush: linear-gradient(rgba(255,255,255,0.094), rgba(255,255,255,0.071) 50%);
    --accent-control-elevation-border-brush: linear-gradient(rgba(255,255,255,0.078) 91%, rgba(0,0,0,0.137));
    --highlight-background: #1c1b1b;
    --highlight-foreground: #fff;
    --highlight-gutter-background: #323131;
    --highlight-gutter-foreground: #e8e8e8;
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  :root {
    --system-alt-high-color: light-dark(#fff, #000);
    --system-alt-low-color: light-dark(rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    --system-alt-medium-color: light-dark(rgba(255,255,255,0.6), rgba(0,0,0,0.6));
    --system-alt-medium-high-color: light-dark(rgba(255,255,255,0.8), rgba(0,0,0,0.8));
    --system-alt-medium-low-color: light-dark(rgba(255,255,255,0.4), rgba(0,0,0,0.4));
    --system-base-high-color: light-dark(#000, #fff);
    --system-base-low-color: light-dark(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    --system-base-medium-color: light-dark(rgba(0,0,0,0.6), rgba(255,255,255,0.6));
    --system-base-medium-high-color: light-dark(rgba(0,0,0,0.8), rgba(255,255,255,0.8));
    --system-base-medium-low-color: light-dark(rgba(0,0,0,0.4), rgba(255,255,255,0.4));
    --system-chrome-alt-low-color: light-dark(#171717, #f2f2f2);
    --system-chrome-black-high-color: light-dark(#000, #000);
    --system-chrome-black-low-color: light-dark(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
    --system-chrome-black-medium-low-color: light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.4));
    --system-chrome-black-medium-color: light-dark(rgba(0,0,0,0.8), rgba(0,0,0,0.8));
    --system-chrome-disabled-high-color: light-dark(#ccc, #333);
    --system-chrome-disabled-low-color: light-dark(#7a7a7a, #858585);
    --system-chrome-high-color: light-dark(#ccc, #767676);
    --system-chrome-low-color: light-dark(#f2f2f2, #171717);
    --system-chrome-medium-color: light-dark(#e6e6e6, #1f1f1f);
    --system-chrome-medium-low-color: light-dark(#f2f2f2, #2b2b2b);
    --system-chrome-white-color: light-dark(#fff, #fff);
    --system-chrome-gray-color: light-dark(#767676, #767676);
    --system-list-low-color: light-dark(rgba(0,0,0,0.098), rgba(255,255,255,0.098));
    --system-list-medium-color: light-dark(rgba(0,0,0,0.2), rgba(255,255,255,0.2));
    --system-error-text-color: light-dark(#c50500, #fff000);
    --text-fill-color-primary: light-dark(rgba(0,0,0,0.894), #fff);
    --text-fill-color-secondary: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
    --text-fill-color-tertiary: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
    --text-fill-color-disabled: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    --text-fill-color-inverse: light-dark(#fff, rgba(0,0,0,0.894));
    --accent-text-fill-color-primary: light-dark(#36b1a9, #86eae3);
    --accent-text-fill-color-secondary: light-dark(#2d968f, #86eae3);
    --accent-text-fill-color-tertiary: light-dark(#3ac7bd, #55f8ec);
    --accent-text-fill-color-disabled: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    --text-on-accent-fill-color-selected-text: light-dark(#fff, #fff);
    --text-on-accent-fill-color-primary: light-dark(#fff, #000);
    --text-on-accent-fill-color-secondary: light-dark(rgba(255,255,255,0.702), rgba(0,0,0,0.502));
    --text-on-accent-fill-color-disabled: light-dark(#fff, rgba(255,255,255,0.529));
    --control-fill-color-default: light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.059));
    --control-fill-color-secondary: light-dark(rgba(249,249,249,0.502), rgba(255,255,255,0.082));
    --control-fill-color-tertiary: light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.031));
    --control-fill-color-disabled: light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.043));
    --control-fill-color-transparent: light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
    --control-fill-color-input-active: light-dark(#fff, rgba(30,30,30,0.702));
    --control-strong-fill-color-default: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.545));
    --control-strong-fill-color-disabled: light-dark(rgba(0,0,0,0.318), rgba(255,255,255,0.247));
    --control-solid-fill-color-default: light-dark(#fff, #454545);
    --subtle-fill-color-transparent: light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
    --subtle-fill-color-secondary: light-dark(rgba(0,0,0,0.035), rgba(255,255,255,0.059));
    --subtle-fill-color-tertiary: light-dark(rgba(0,0,0,0.024), rgba(255,255,255,0.039));
    --subtle-fill-color-disabled: light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
    --control-alt-fill-color-transparent: light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
    --control-alt-fill-color-secondary: light-dark(rgba(0,0,0,0.024), rgba(0,0,0,0.098));
    --control-alt-fill-color-tertiary: light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.043));
    --control-alt-fill-color-quarternary: light-dark(rgba(0,0,0,0.094), rgba(255,255,255,0.071));
    --control-alt-fill-color-disabled: light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
    --control-on-image-fill-color-default: light-dark(rgba(255,255,255,0.788), rgba(28,28,28,0.702));
    --control-on-image-fill-color-secondary: light-dark(#f3f3f3, #1a1a1a);
    --control-on-image-fill-color-tertiary: light-dark(#ebebeb, #131313);
    --control-on-image-fill-color-disabled: light-dark(rgba(255,255,255,0), #1e1e1e);
    --accent-fill-color-default: light-dark(#3ac7bd, #55f8ec);
    --accent-fill-color-secondary: light-dark(rgba(58,199,189,0.9), rgba(85,248,236,0.9));
    --accent-fill-color-tertiary: light-dark(rgba(58,199,189,0.8), rgba(85,248,236,0.8));
    --accent-fill-color-disabled: light-dark(rgba(0,0,0,0.216), rgba(255,255,255,0.157));
    --control-stroke-color-default: light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    --control-stroke-color-secondary: light-dark(rgba(0,0,0,0.161), rgba(255,255,255,0.094));
    --control-stroke-color-on-accent-default: light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    --control-stroke-color-on-accent-secondary: light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.137));
    --control-stroke-color-on-accent-tertiary: light-dark(rgba(0,0,0,0.216), rgba(0,0,0,0.216));
    --control-stroke-color-on-accent-disabled: light-dark(rgba(0,0,0,0.059), rgba(0,0,0,0.2));
    --control-stroke-color-for-strong-fill-when-on-image: light-dark(rgba(255,255,255,0.349), rgba(0,0,0,0.42));
    --card-stroke-color-default: light-dark(rgba(0,0,0,0.059), rgba(0,0,0,0.098));
    --card-stroke-color-default-solid: light-dark(#ebebeb, #1c1c1c);
    --control-strong-stroke-color-default: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.545));
    --control-strong-stroke-color-disabled: light-dark(rgba(0,0,0,0.216), rgba(255,255,255,0.157));
    --surface-stroke-color-default: light-dark(rgba(117,117,117,0.4), rgba(117,117,117,0.4));
    --surface-stroke-color-flyout: light-dark(rgba(0,0,0,0.059), rgba(0,0,0,0.2));
    --surface-stroke-color-inverse: light-dark(rgba(255,255,255,0.082), rgba(0,0,0,0.059));
    --divider-stroke-color-default: light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.082));
    --focus-stroke-color-outer: light-dark(rgba(0,0,0,0.894), #fff);
    --focus-stroke-color-inner: light-dark(rgba(255,255,255,0.702), rgba(0,0,0,0.702));
    --card-background-fill-color-default: light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.051));
    --card-background-fill-color-secondary: light-dark(rgba(246,246,246,0.502), rgba(255,255,255,0.031));
    --smoke-fill-color-default: light-dark(rgba(0,0,0,0.302), rgba(0,0,0,0.302));
    --layer-fill-color-default: light-dark(rgba(255,255,255,0.502), rgba(58,58,58,0.298));
    --layer-fill-color-alt: light-dark(#fff, rgba(255,255,255,0.051));
    --layer-on-acrylic-fill-color-default: light-dark(rgba(255,255,255,0.251), rgba(255,255,255,0.035));
    --layer-on-accent-acrylic-fill-color-default: light-dark(rgba(255,255,255,0.251), rgba(255,255,255,0.035));
    --layer-on-mica-base-alt-fill-color-default: light-dark(rgba(255,255,255,0.702), rgba(58,58,58,0.451));
    --layer-on-mica-base-alt-fill-color-secondary: light-dark(rgba(0,0,0,0.039), rgba(255,255,255,0.059));
    --layer-on-mica-base-alt-fill-color-tertiary: light-dark(#f9f9f9, #2c2c2c);
    --layer-on-mica-base-alt-fill-color-transparent: light-dark(rgba(0,0,0,0), rgba(255,255,255,0));
    --solid-background-fill-color-base: light-dark(#f3f3f3, #202020);
    --solid-background-fill-color-secondary: light-dark(#eee, #1c1c1c);
    --solid-background-fill-color-tertiary: light-dark(#f9f9f9, #282828);
    --solid-background-fill-color-quarternary: light-dark(#fff, #2c2c2c);
    --solid-background-fill-color-transparent: light-dark(rgba(243,243,243,0), rgba(32,32,32,0));
    --solid-background-fill-color-base-alt: light-dark(#dadada, #0a0a0a);
    --system-fill-color-success: light-dark(#0f7b0f, #6ccb5f);
    --system-fill-color-caution: light-dark(#9d5d00, #fce100);
    --system-fill-color-critical: light-dark(#c42b1c, #ff99a4);
    --system-fill-color-neutral: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.545));
    --system-fill-color-solid-neutral: light-dark(#8a8a8a, #9d9d9d);
    --system-fill-color-attention-background: light-dark(rgba(246,246,246,0.502), rgba(255,255,255,0.031));
    --system-fill-color-success-background: light-dark(#dff6dd, #393d1b);
    --system-fill-color-caution-background: light-dark(#fff4ce, #433519);
    --system-fill-color-critical-background: light-dark(#fde7e9, #442726);
    --system-fill-color-neutral-background: light-dark(rgba(0,0,0,0.024), rgba(255,255,255,0.031));
    --system-fill-color-solid-attention-background: light-dark(#f7f7f7, #2e2e2e);
    --system-fill-color-solid-neutral-background: light-dark(#f3f3f3, #2e2e2e);
    --text-on-accent-fill-color-default: light-dark(#fff, $text-on-accent-fill-color-default-dark);
    --text-on-accent-a-a-fill-color-primary: light-dark(#000, $text-on-accent-a-a-fill-color-primary-dark);
    --text-on-accent-a-a-fill-color-secondary: light-dark(rgba(0,0,0,0.502), $text-on-accent-a-a-fill-color-secondary-dark);
    --text-on-accent-a-a-fill-color-disabled: light-dark(rgba(255,255,255,0.529), $text-on-accent-a-a-fill-color-disabled-dark);
    --control-a-a-fill-color-default: light-dark(rgba(255,255,255,0.545), $control-a-a-fill-color-default-dark);
    --control-a-a-fill-color-disabled: light-dark(rgba(255,255,255,0.247), $control-a-a-fill-color-disabled-dark);
    --accent-a-a-fill-color-disabled: light-dark(rgba(255,255,255,0.157), $accent-a-a-fill-color-disabled-dark);
    --control-stroke-color-for-a-a-fill-on-image: light-dark(rgba(0,0,0,0.42), $control-stroke-color-for-a-a-fill-on-image-dark);
    --control-a-a-stroke-color-default: light-dark(rgba(255,255,255,0.545), $control-a-a-stroke-color-default-dark);
    --control-a-a-stroke-color-disabled: light-dark(rgba(255,255,255,0.157), $control-a-a-stroke-color-disabled-dark);
    --control-elevation-border-brush: light-dark(linear-gradient(rgba(0,0,0,0.059) 91%, rgba(0,0,0,0.161)), linear-gradient(rgba(255,255,255,0.094), rgba(255,255,255,0.071) 10%));
    --circle-elevation-border-brush: light-dark(linear-gradient(rgba(0,0,0,0.059) 50%, rgba(0,0,0,0.161) 95%), linear-gradient(rgba(255,255,255,0.094), rgba(255,255,255,0.071) 50%));
    --accent-control-elevation-border-brush: light-dark(linear-gradient(rgba(255,255,255,0.078) 91%, rgba(0,0,0,0.4)), linear-gradient(rgba(255,255,255,0.078) 91%, rgba(0,0,0,0.137)));
    --csstools-color-scheme--light: initial;
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
  :root {
    --csstools-color-scheme--light:  ;
  }
}
}
@-moz-keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-webkit-keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-o-keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
:root {
  scroll-padding: 48px 0 40px 0;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
html {
  font-family: Segoe UI Variable, Segoe UI, sans-serif;
}
body {
  margin: 0;
  height: 100%;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  font-family: Segoe UI Variable, Segoe UI, sans-serif;
  color: rgba(0,0,0,0.894);
  background: #f3f3f3;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background: #202020;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  body {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: light-dark(#f3f3f3, #202020);
  }
}
blockquote {
  border-left: 5px solid #3ac7bd;
  border-right: none;
  font-style: italic;
  padding: 2px 15px;
  margin-left: 1rem;
  margin-right: 1rem;
}
[dir='rtl'] blockquote {
  border-left: none;
  border-left: 5px solid #3ac7bd;
}
@media (prefers-color-scheme: dark) {
  blockquote {
    border-left: 5px solid #55f8ec;
  }
  [dir='rtl'] blockquote {
    border-left: 5px solid #55f8ec;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  blockquote {
    border-left: 5px solid light-dark(#3ac7bd, #55f8ec);
  }
  [dir='rtl'] blockquote {
    border-left: 5px solid light-dark(#3ac7bd, #55f8ec);
  }
}
a {
  color: #36b1a9;
  -webkit-text-decoration: none;
  text-decoration: none;
}
a:hover {
  color: #2d968f;
}
a:active {
  color: #3ac7bd;
}
a:not([href]),
a:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  a {
    color: #86eae3;
  }
  a:hover {
    color: #86eae3;
  }
  a:active {
    color: #55f8ec;
  }
  a:not([href]),
  a:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  a {
    color: light-dark(#36b1a9, #86eae3);
  }
  a:hover {
    color: light-dark(#2d968f, #86eae3);
  }
  a:active {
    color: light-dark(#3ac7bd, #55f8ec);
  }
  a:not([href]),
  a:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
kbd {
  border: 1px solid #3ac7bd;
}
@media (prefers-color-scheme: dark) {
  kbd {
    border: 1px solid #55f8ec;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  kbd {
    border: 1px solid light-dark(#3ac7bd, #55f8ec);
  }
}
embed,
iframe,
img,
video {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
figure.highlight {
  background: #f3f3f3;
  color: #444;
}
@media (prefers-color-scheme: dark) {
  figure.highlight {
    background: #1c1b1b;
    color: #fff;
  }
}
figure.highlight {
  margin: 0 auto 20px;
}
pre,
code,
kbd,
samp {
  font-size: 0.875em;
  font-family: "Cascadia Code NF", "Cascadia Code PL", "Cascadia Code", Consolas, "Courier New", "Liberation Mono", SFMono-Regular, Menlo, Monaco, monospace;
}
mark,
code,
kbd {
  padding: 0.1rem 0.25rem;
  color: #444;
  background: #f3f3f3;
  -webkit-border-radius: 0.25rem;
     -moz-border-radius: 0.25rem;
          border-radius: 0.25rem;
}
@media (prefers-color-scheme: dark) {
  mark,
  code,
  kbd {
    color: #fff;
    background-color: #1c1b1b;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  mark,
  code,
  kbd {
    color: light-dark(#444, #fff);
    background-color: light-dark(#f3f3f3, #1c1b1b);
  }
}
a>code {
  font-size: inherit;
  color: inherit;
  padding: 0;
  background: none;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
figure.highlight {
  overflow: auto;
  position: relative;
  --csstools-color-scheme--light: initial;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  figure.highlight {
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
  }
}
figure.highlight pre {
  border: 0;
  margin: 0;
  padding: 10px 0;
}
figure.highlight table {
  border: 0;
  margin: 0;
  width: auto;
}
figure.highlight td {
  border: 0;
  padding: 0;
}
figure.highlight .gutter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
figure.highlight .gutter pre {
  background: #e1e1e1;
  color: #555;
  padding-left: 10px;
  padding-right: 10px;
  text-align: right;
}
@media (prefers-color-scheme: dark) {
  figure.highlight .gutter pre {
    background: #323131;
    color: #e8e8e8;
  }
}
figure.highlight .code pre {
  padding-left: 10px;
  width: 100%;
}
figure.highlight .marked {
  background: rgba(0,0,0,0.3);
}
.pagination .prev,
.pagination .next,
.pagination .page-number,
.pagination .space {
  display: inline-block;
  margin: -1px 10px 0;
  padding: 0 10px;
}
@media (max-width: 767px) {
  .pagination .prev,
  .pagination .next,
  .pagination .page-number,
  .pagination .space {
    margin: 0 5px;
  }
}
.pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 32px 0 0;
}
.pagination .prev,
.pagination .next,
.pagination .page-number {
  border-bottom: 0;
}
.pagination .space {
  margin: 0;
  padding: 0;
}
.menu {
  margin: 0;
}
.main-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 4px;
}
.menu-item {
  display: inline;
  list-style: none;
  position: relative;
}
.menu-item a {
  padding: 0 12px;
  line-height: 48px;
  color: rgba(0,0,0,0.894);
}
.menu-item a svg {
  display: none;
  margin-bottom: -5px;
  fill: currentColor;
}
@media (min-width: 768px) {
  .menu-item a svg {
    display: inline;
    margin-right: 4px;
  }
}
@media (max-width: 413px) {
  .menu-item a svg {
    display: inline;
  }
  .menu-item a .title {
    display: none;
  }
}
.menu-item a:hover {
  color: rgba(0,0,0,0.62);
}
.menu-item a:active {
  color: rgba(0,0,0,0.447);
}
.menu-item a:active.menu-item-active::after {
  -webkit-transform: scaleX(0.625);
     -moz-transform: scaleX(0.625);
      -ms-transform: scaleX(0.625);
       -o-transform: scaleX(0.625);
          transform: scaleX(0.625);
}
.menu-item a:not([href]),
.menu-item a:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
.menu-item a.menu-item-active::after {
  content: '';
  position: absolute;
  left: -webkit-calc(50% - 8px);
  left: -moz-calc(50% - 8px);
  left: calc(50% - 8px);
  width: 16px;
  height: 3px;
  margin-top: 38px;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  background-color: #3ac7bd;
  -webkit-transition: -webkit-transform 0.167s ease-in-out;
  transition: -webkit-transform 0.167s ease-in-out;
  -o-transition: -o-transform 0.167s ease-in-out;
  -moz-transition: transform 0.167s ease-in-out, -moz-transform 0.167s ease-in-out;
  transition: transform 0.167s ease-in-out;
  transition: transform 0.167s ease-in-out, -webkit-transform 0.167s ease-in-out, -moz-transform 0.167s ease-in-out, -o-transform 0.167s ease-in-out;
}
.menu-item a .badge {
  line-height: normal;
  min-width: 14px;
  height: 14px;
  position: absolute;
  right: -1px;
  text-align: center;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  padding: 1px;
  margin-top: 9px;
  background-color: #3ac7bd;
  color: #fff;
  font-size: 9.5px;
}
@media (prefers-color-scheme: dark) {
  .menu-item a {
    color: #fff;
  }
  .menu-item a:hover {
    color: rgba(255,255,255,0.773);
  }
  .menu-item a:active {
    color: rgba(255,255,255,0.529);
  }
  .menu-item a:not([href]),
  .menu-item a:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
  .menu-item a.menu-item-active::after {
    background-color: #55f8ec;
  }
  .menu-item a .badge {
    background-color: #55f8ec;
    color: #000;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .menu-item a {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .menu-item a:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .menu-item a:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .menu-item a:not([href]),
  .menu-item a:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
  .menu-item a.menu-item-active::after {
    background-color: light-dark(#3ac7bd, #55f8ec);
  }
  .menu-item a .badge {
    background-color: light-dark(#3ac7bd, #55f8ec);
    color: light-dark(#fff, #000);
  }
}
@media (max-width: 235px) {
  .menu-item a.menu-item-active {
    color: #3ac7bd;
  }
  @supports (color: light-dark(#f00, #f00)) {
    .menu-item a.menu-item-active {
      color: light-dark(#3ac7bd, #55f8ec);
    }
  }
  .menu-item a .badge,
  .menu-item a.menu-item-active::after {
    display: none;
  }
}
@media (max-width: 235px) and (prefers-color-scheme: dark) {
  .menu-item a.menu-item-active {
    color: #55f8ec;
  }
}
.menu-item.menu-item-icon a svg {
  display: inline;
  margin-right: 0;
}
.menu-item.menu-item-theme {
  display: none;
}
@supports (color: light-dark(#f00, #f00)) {
  .menu-item.menu-item-theme {
    display: inline;
  }
}
.menu-item.menu-item-theme .dark-icon,
.menu-item.menu-item-theme .light-icon,
.menu-item.menu-item-theme .system-icon {
  display: none;
}
.menu-item.menu-item-theme a.toggle-light .light-icon {
  display: inline;
}
.menu-item.menu-item-theme a.toggle-dark .dark-icon {
  display: inline;
}
.menu-item.menu-item-theme a.toggle-system .system-icon {
  display: inline;
}
.header-container {
  height: 48px;
}
.header-container .titlebar {
  background: #fbfbfb;
}
@media (prefers-color-scheme: dark) {
  .header-container .titlebar {
    background: #2b2b2b;
  }
}
.header-container .titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(255,255,255,0.702);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  padding: env(titlebar-area-y, 0) -webkit-calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px)) 0 env(titlebar-area-x, 0);
  padding: env(titlebar-area-y, 0) -moz-calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px)) 0 env(titlebar-area-x, 0);
  padding: env(titlebar-area-y, 0) calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px)) 0 env(titlebar-area-x, 0);
  -webkit-app-region: drag;
  app-region: drag;
}
@media (prefers-color-scheme: dark) {
  .header-container .titlebar {
    background: rgba(255,255,255,0.051);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .header-container .titlebar {
    background: light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.051));
  }
}
.header-container .titlebar .header-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 4px;
  overflow-x: auto;
}
.header-container .titlebar .header-inner .header-left {
  float: left;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}
.header-container .titlebar .header-inner .header-right {
  float: right;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}
.sidebar-nav {
  height: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  margin: 0;
  padding: 0;
}
.sidebar-nav-active .sidebar-nav {
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.sidebar-nav li {
  display: inline;
  list-style: none;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 0 12px;
  line-height: 48px;
  color: rgba(0,0,0,0.894);
}
.sidebar-nav li:hover {
  color: rgba(0,0,0,0.62);
}
.sidebar-nav li:active {
  color: rgba(0,0,0,0.447);
}
.sidebar-overview-active .sidebar-nav li:active.sidebar-nav-overview::after,
.sidebar-toc-active .sidebar-nav li:active.sidebar-nav-toc::after {
  -webkit-transform: scaleX(0.625);
     -moz-transform: scaleX(0.625);
      -ms-transform: scaleX(0.625);
       -o-transform: scaleX(0.625);
          transform: scaleX(0.625);
}
.sidebar-overview-active .sidebar-nav li.sidebar-nav-overview::after,
.sidebar-toc-active .sidebar-nav li.sidebar-nav-toc::after {
  content: '';
  position: absolute;
  left: -webkit-calc(50% - 8px);
  left: -moz-calc(50% - 8px);
  left: calc(50% - 8px);
  width: 16px;
  height: 3px;
  margin-top: 38px;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  background-color: #3ac7bd;
  -webkit-transition: -webkit-transform 0.167s ease-in-out;
  transition: -webkit-transform 0.167s ease-in-out;
  -o-transition: -o-transform 0.167s ease-in-out;
  -moz-transition: transform 0.167s ease-in-out, -moz-transform 0.167s ease-in-out;
  transition: transform 0.167s ease-in-out;
  transition: transform 0.167s ease-in-out, -webkit-transform 0.167s ease-in-out, -moz-transform 0.167s ease-in-out, -o-transform 0.167s ease-in-out;
}
@media (prefers-color-scheme: dark) {
  .sidebar-nav li {
    color: #fff;
  }
  .sidebar-nav li:hover {
    color: rgba(255,255,255,0.773);
  }
  .sidebar-nav li:active {
    color: rgba(255,255,255,0.529);
  }
  .sidebar-overview-active .sidebar-nav li.sidebar-nav-overview::after,
  .sidebar-toc-active .sidebar-nav li.sidebar-nav-toc::after {
    background-color: #55f8ec;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .sidebar-nav li {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .sidebar-nav li:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .sidebar-nav li:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .sidebar-overview-active .sidebar-nav li.sidebar-nav-overview::after,
  .sidebar-toc-active .sidebar-nav li.sidebar-nav-toc::after {
    background-color: light-dark(#3ac7bd, #55f8ec);
  }
}
.sidebar-panel-container {
  padding: 16px 0;
}
.sidebar-nav-active .sidebar-panel-container {
  padding-top: 8px;
}
.sidebar-panel-container .sidebar-panel {
  height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.sidebar-panel-container .sidebar-panel.site-overview-wrap {
  text-align: center;
}
.sidebar-overview-active .sidebar-panel-container .sidebar-panel.site-overview-wrap,
.sidebar-toc-active .sidebar-panel-container .sidebar-panel.post-toc-wrap {
  height: auto;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.post-toc ol {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 10px;
  text-align: left;
  line-height: 1.8;
}
.post-toc ol a {
  color: rgba(0,0,0,0.894);
}
.post-toc ol a:hover {
  color: rgba(0,0,0,0.62);
}
.post-toc ol a:active {
  color: rgba(0,0,0,0.447);
}
.post-toc ol a:not([href]),
.post-toc ol a:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .post-toc ol a {
    color: #fff;
  }
  .post-toc ol a:hover {
    color: rgba(255,255,255,0.773);
  }
  .post-toc ol a:active {
    color: rgba(255,255,255,0.529);
  }
  .post-toc ol a:not([href]),
  .post-toc ol a:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .post-toc ol a {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .post-toc ol a:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .post-toc ol a:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .post-toc ol a:not([href]),
  .post-toc ol a:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.post-toc .nav .nav-child {
  height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: height, opacity 0.167s ease-in-out;
  -o-transition: height, opacity 0.167s ease-in-out;
  -moz-transition: height, opacity 0.167s ease-in-out;
  transition: height, opacity 0.167s ease-in-out;
  visibility: hidden;
}
.post-toc .nav .active>.nav-child,
.post-toc .nav li:hover>.nav-child,
.post-toc .nav li>.nav-child:hover {
  height: auto;
  opacity: 1;
  visibility: visible;
}
.post-toc .nav .active>a {
  color: #36b1a9;
}
.post-toc .nav .active>a:hover {
  color: #2d968f;
}
.post-toc .nav .active>a:active {
  color: #3ac7bd;
}
.post-toc .nav .active>a:not([href]),
.post-toc .nav .active>a:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .post-toc .nav .active>a {
    color: #86eae3;
  }
  .post-toc .nav .active>a:hover {
    color: #86eae3;
  }
  .post-toc .nav .active>a:active {
    color: #55f8ec;
  }
  .post-toc .nav .active>a:not([href]),
  .post-toc .nav .active>a:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .post-toc .nav .active>a {
    color: light-dark(#36b1a9, #86eae3);
  }
  .post-toc .nav .active>a:hover {
    color: light-dark(#2d968f, #86eae3);
  }
  .post-toc .nav .active>a:active {
    color: light-dark(#3ac7bd, #55f8ec);
  }
  .post-toc .nav .active>a:not([href]),
  .post-toc .nav .active>a:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.site-author-image {
  max-width: 96px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  -webkit-transition: -webkit-transform 1s ease-out;
  transition: -webkit-transform 1s ease-out;
  -o-transition: -o-transform 1s ease-out;
  -moz-transition: transform 1s ease-out, -moz-transform 1s ease-out;
  transition: transform 1s ease-out;
  transition: transform 1s ease-out, -webkit-transform 1s ease-out, -moz-transform 1s ease-out, -o-transform 1s ease-out;
}
.site-author-image:hover {
  -webkit-transform: rotateZ(360deg);
     -moz-transform: rotateZ(360deg);
      -ms-transform: rotate(360deg);
       -o-transform: rotateZ(360deg);
          transform: rotateZ(360deg);
}
.site-author-name {
  color: rgba(0,0,0,0.894);
  font-weight: bold;
  margin: 5px 0 0;
}
@media (prefers-color-scheme: dark) {
  .site-author-name {
    color: #fff;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .site-author-name {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
}
.site-description {
  color: rgba(0,0,0,0.62);
  margin-top: 5px;
}
@media (prefers-color-scheme: dark) {
  .site-description {
    color: rgba(255,255,255,0.773);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .site-description {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
}
.site-state-wrap {
  margin-top: 16px;
}
.site-state-wrap .site-state-item {
  padding: 0 15px;
  display: inline;
}
.site-state-wrap .site-state-item a {
  border-bottom: 0;
  display: inline-block;
  color: rgba(0,0,0,0.894);
}
.site-state-wrap .site-state-item a:hover {
  color: rgba(0,0,0,0.62);
}
.site-state-wrap .site-state-item a:active {
  color: rgba(0,0,0,0.447);
}
.site-state-wrap .site-state-item a:not([href]),
.site-state-wrap .site-state-item a:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .site-state-wrap .site-state-item a {
    color: #fff;
  }
  .site-state-wrap .site-state-item a:hover {
    color: rgba(255,255,255,0.773);
  }
  .site-state-wrap .site-state-item a:active {
    color: rgba(255,255,255,0.529);
  }
  .site-state-wrap .site-state-item a:not([href]),
  .site-state-wrap .site-state-item a:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .site-state-wrap .site-state-item a {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .site-state-wrap .site-state-item a:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .site-state-wrap .site-state-item a:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .site-state-wrap .site-state-item a:not([href]),
  .site-state-wrap .site-state-item a:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.site-state-wrap .site-state-item-count {
  display: block;
  font-size: 20px;
  font-weight: 600;
}
.site-state-wrap .site-state-item-name {
  color: rgba(0,0,0,0.62);
  font-size: 12px;
}
@media (prefers-color-scheme: dark) {
  .site-state-wrap .site-state-item-name {
    color: rgba(255,255,255,0.773);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .site-state-wrap .site-state-item-name {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
}
.cc-license {
  margin-top: 20px;
}
.cc-license .cc-opacity {
  border-bottom: 0;
  opacity: 0.7;
}
.cc-license .cc-opacity:hover {
  opacity: 0.9;
}
.sidebar-post-related {
  margin-top: 8px;
}
.sidebar-post-related .links-of-blogroll-title {
  margin: 16px 12px 1rem 12px;
}
.sidebar-post-related .popular-posts {
  margin: 0;
  list-style: none;
  padding: 0 2px 4px 10px;
  text-align: left;
}
.sidebar-post-related .popular-posts .popular-posts-item {
  margin-bottom: 16px;
}
.sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link {
  color: rgba(0,0,0,0.894);
}
.sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:hover {
  color: rgba(0,0,0,0.62);
}
.sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:active {
  color: rgba(0,0,0,0.447);
}
.sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:not([href]),
.sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link {
    color: #fff;
  }
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:hover {
    color: rgba(255,255,255,0.773);
  }
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:active {
    color: rgba(255,255,255,0.529);
  }
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:not([href]),
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:not([href]),
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link .popular-posts-time {
  display: block;
  margin-bottom: 4px;
  color: rgba(0,0,0,0.62);
}
@media (prefers-color-scheme: dark) {
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link .popular-posts-time {
    color: rgba(255,255,255,0.773);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .sidebar-post-related .popular-posts .popular-posts-item .popular-posts-link .popular-posts-time {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
}
.sidebar-container {
  position: -webkit-sticky;
  position: sticky;
  width: 240px;
  max-width: 100%;
  top: 56px;
}
.sidebar-container .sidebar-inner {
  padding: 0 16px;
  background: rgba(255,255,255,0.702);
  border: 1px solid rgba(0,0,0,0.059);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  .sidebar-container .sidebar-inner {
    background: rgba(255,255,255,0.051);
    border: 1px solid rgba(255,255,255,0.071);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .sidebar-container .sidebar-inner {
    background: light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.051));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
}
@media (max-width: 767px) {
  .sidebar-container {
    position: static;
  }
  .sidebar-container .sidebar-inner {
    -webkit-backdrop-filter: blur(40px);
            backdrop-filter: blur(40px);
  }
}
.footer-container {
  height: 40px;
}
.footer-container .footer-inner {
  background: #fbfbfb;
}
@media (prefers-color-scheme: dark) {
  .footer-container .footer-inner {
    background: #2b2b2b;
  }
}
.footer-container .footer-inner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.702);
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 10px;
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-weight: normal;
  font-size: 12px;
}
.footer-container .footer-inner .left {
  float: left;
}
.footer-container .footer-inner .right {
  float: right;
}
@media (max-width: 194px) {
  .footer-container .footer-inner .right {
    display: none;
  }
}
.footer-container .footer-inner a {
  color: rgba(0,0,0,0.894);
  -webkit-text-decoration: none;
  text-decoration: none;
}
.footer-container .footer-inner a:focus {
  outline: 1px dashed;
  outline-offset: 3px;
}
@media (prefers-color-scheme: dark) {
  .footer-container .footer-inner {
    background: rgba(255,255,255,0.051);
    color: #fff;
  }
  .footer-container .footer-inner a {
    color: #fff;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .footer-container .footer-inner {
    background: light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.051));
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .footer-container .footer-inner a {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
}
body .background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -moz-background-size: 400% 400%;
    -o-background-size: 400% 400%;
       background-size: 400% 400%;
  background-image: -webkit-linear-gradient(45deg, #ff9a9a, #a8e6cf, #f3f3f3, #ff9a9a);
  background-image: -moz-linear-gradient(45deg, #ff9a9a, #a8e6cf, #f3f3f3, #ff9a9a);
  background-image: -o-linear-gradient(45deg, #ff9a9a, #a8e6cf, #f3f3f3, #ff9a9a);
  background-image: linear-gradient(45deg, #ff9a9a, #a8e6cf, #f3f3f3, #ff9a9a);
  background-position: 0%;
  -webkit-animation: gradient-animation 10s ease infinite;
     -moz-animation: gradient-animation 10s ease infinite;
       -o-animation: gradient-animation 10s ease infinite;
          animation: gradient-animation 10s ease infinite;
}
@media (prefers-color-scheme: dark) {
  body .background {
    background-image: -webkit-linear-gradient(45deg, #ff6b6b, #4ecdc4, #202020, #ff6b6b);
    background-image: -moz-linear-gradient(45deg, #ff6b6b, #4ecdc4, #202020, #ff6b6b);
    background-image: -o-linear-gradient(45deg, #ff6b6b, #4ecdc4, #202020, #ff6b6b);
    background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #202020, #ff6b6b);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  body .background {
    background-image: -webkit-linear-gradient(45deg, light-dark(#ff9a9a, #ff6b6b), light-dark(#a8e6cf, #4ecdc4), light-dark(#f3f3f3, #202020), light-dark(#ff9a9a, #ff6b6b));
    background-image: -moz-linear-gradient(45deg, light-dark(#ff9a9a, #ff6b6b), light-dark(#a8e6cf, #4ecdc4), light-dark(#f3f3f3, #202020), light-dark(#ff9a9a, #ff6b6b));
    background-image: -o-linear-gradient(45deg, light-dark(#ff9a9a, #ff6b6b), light-dark(#a8e6cf, #4ecdc4), light-dark(#f3f3f3, #202020), light-dark(#ff9a9a, #ff6b6b));
    background-image: linear-gradient(45deg, light-dark(#ff9a9a, #ff6b6b), light-dark(#a8e6cf, #4ecdc4), light-dark(#f3f3f3, #202020), light-dark(#ff9a9a, #ff6b6b));
  }
}
body .background .background-hover {
  width: 100%;
  height: 100%;
  background: rgba(243,243,243,0.5);
}
@media (prefers-color-scheme: dark) {
  body .background .background-hover {
    background: rgba(32,32,32,0.8);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  body .background .background-hover {
    background: light-dark(rgba(243,243,243,0.5), rgba(32,32,32,0.8));
  }
}
.main-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.main-grid .main-inner {
  padding: 16px;
  width: -webkit-calc(100% - 240px);
  width: -moz-calc(100% - 240px);
  width: calc(100% - 240px);
}
.main-grid .column {
  float: right;
  width: 240px;
  pointer-events: none;
  padding: 16px 16px 16px 0;
}
@media (max-width: 767px) {
  .main-grid .main-inner {
    float: none;
    width: -webkit-calc(100% - 32px);
    width: -moz-calc(100% - 32px);
    width: calc(100% - 32px);
  }
  .main-grid .column {
    position: fixed;
    left: -272px;
    top: 48px;
    right: 0;
    bottom: 40px;
    max-width: -webkit-calc(100% - 32px);
    max-width: -moz-calc(100% - 32px);
    max-width: calc(100% - 32px);
    padding: 16px 16px 54px 16px;
    overflow-y: auto;
    -webkit-transition: left 0.167s ease-in-out;
    -o-transition: left 0.167s ease-in-out;
    -moz-transition: left 0.167s ease-in-out;
    transition: left 0.167s ease-in-out;
  }
  .sidebar-active .main-grid .column {
    left: 0;
  }
}
@media (min-width: 768px) {
  .main-grid {
    padding: 32px 56px;
  }
}
@media (min-width: 1200px) {
  .main-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 80px;
  }
}
@media (min-width: 1600px) {
  .main-grid {
    width: 75%;
    max-width: none;
  }
}
.sidebar-toggle,
.back-to-top {
  cursor: pointer;
  fill: currentColor;
  position: fixed;
  bottom: -300px;
  -webkit-transition: bottom 0.25s ease-in-out;
  -o-transition: bottom 0.25s ease-in-out;
  -moz-transition: bottom 0.25s ease-in-out;
  transition: bottom 0.25s ease-in-out;
}
.sidebar-toggle svg,
.back-to-top svg {
  margin-bottom: -3px;
}
.sidebar-toggle {
  left: 16px;
  padding: 6px 8px;
}
@media (max-width: 767px) {
  .sidebar-toggle {
    bottom: 56px;
  }
}
.back-to-top {
  right: 16px;
}
.back-to-top.back-to-top-on {
  bottom: 56px;
}
a.random-link {
  display: block;
  padding: 15px 20px;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-align: center;
  color: #fff;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
          box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  background: #007bff;
/* 初始渐变色 */
  background: -webkit-linear-gradient(315deg, #007bff, #ff6b6b);
  background: -moz-linear-gradient(315deg, #007bff, #ff6b6b);
  background: -o-linear-gradient(315deg, #007bff, #ff6b6b);
  background: linear-gradient(135deg, #007bff, #ff6b6b);
/* 添加过渡效果 */
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  -moz-transition: transform 0.3s ease, -moz-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease, -o-transform 0.3s ease;
}
a.random-link:hover {
  -webkit-transform: scale(1.01);
     -moz-transform: scale(1.01);
      -ms-transform: scale(1.01);
       -o-transform: scale(1.01);
          transform: scale(1.01);
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
select {
  color: #1b1b1b;
  background: #fbfbfb;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #ccc;
}
button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
select:not(:disabled):hover {
  color: #1a1a1a;
  background: #f6f6f6;
}
button:not(:disabled):active,
input[type="button"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
select:not(:disabled):active {
  color: #5d5d5d;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
}
button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
select:disabled {
  color: #9d9d9d;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
}
@media (prefers-color-scheme: dark) {
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  select {
    color: #fff;
    background: #2d2d2d;
    border-left: 1px solid #303030;
    border-top: 1px solid #353535;
    border-right: 1px solid #303030;
    border-bottom: 1px solid #303030;
  }
  button:not(:disabled):hover,
  input[type="button"]:not(:disabled):hover,
  input[type="reset"]:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  select:not(:disabled):hover {
    color: #fff;
    background: #323232;
  }
  button:not(:disabled):active,
  input[type="button"]:not(:disabled):active,
  input[type="reset"]:not(:disabled):active,
  input[type="submit"]:not(:disabled):active,
  select:not(:disabled):active {
    color: #cecece;
    background: #272727;
    border: 1px solid #303030;
  }
  button:disabled,
  input[type="button"]:disabled,
  input[type="reset"]:disabled,
  input[type="submit"]:disabled,
  select:disabled {
    color: #787878;
    background: #2a2a2a;
    border: 1px solid #303030;
  }
}
button.accent,
input[type="button"].accent,
input[type="reset"].accent,
input[type="submit"].accent,
select.accent {
  color: #fff;
  background: #3ac7bd;
  border-left: 1px solid #f4f4f4;
  border-top: 1px solid #f4f4f4;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #929292;
}
button.accent:not(:disabled):hover,
input[type="button"].accent:not(:disabled):hover,
input[type="reset"].accent:not(:disabled):hover,
input[type="submit"].accent:not(:disabled):hover,
select.accent:not(:disabled):hover {
  color: #fff;
  background: #4dcbc2;
}
button.accent:not(:disabled):active,
input[type="button"].accent:not(:disabled):active,
input[type="reset"].accent:not(:disabled):active,
input[type="submit"].accent:not(:disabled):active,
select.accent:not(:disabled):active {
  color: #cff1ef;
  background: #5fd0c8;
  border: 1px solid #f3f3f3;
}
button.accent:disabled,
input[type="button"].accent:disabled,
input[type="reset"].accent:disabled,
input[type="submit"].accent:disabled,
select.accent:disabled {
  color: #fff;
  background: #bfbfbf;
  border: 1px solid #f3f3f3;
}
@media (prefers-color-scheme: dark) {
  button.accent,
  input[type="button"].accent,
  input[type="reset"].accent,
  input[type="submit"].accent,
  select.accent {
    color: #000;
    background: #55f8ec;
    border-left: 1px solid #313131;
    border-top: 1px solid #313131;
    border-right: 1px solid #313131;
    border-bottom: 1px solid #1c1c1c;
  }
  button.accent:not(:disabled):hover,
  input[type="button"].accent:not(:disabled):hover,
  input[type="reset"].accent:not(:disabled):hover,
  input[type="submit"].accent:not(:disabled):hover,
  select.accent:not(:disabled):hover {
    color: #000;
    background: #50e2d8;
  }
  button.accent:not(:disabled):active,
  input[type="button"].accent:not(:disabled):active,
  input[type="reset"].accent:not(:disabled):active,
  input[type="submit"].accent:not(:disabled):active,
  select.accent:not(:disabled):active {
    color: #256661;
    background: #4acdc3;
    border: 1px solid #202020;
  }
  button.accent:disabled,
  input[type="button"].accent:disabled,
  input[type="reset"].accent:disabled,
  input[type="submit"].accent:disabled,
  select.accent:disabled {
    color: #a7a7a7;
    background: #434343;
    border: 1px solid #202020;
  }
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
select {
  padding: 6px 11px;
  color: rgba(0,0,0,0.894);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  background: padding-box rgba(255,255,255,0.702);
  border-left: 1px solid rgba(0,0,0,0.059);
  border-top: 1px solid rgba(0,0,0,0.059);
  border-right: 1px solid rgba(0,0,0,0.059);
  border-bottom: 1px solid rgba(0,0,0,0.161);
}
button:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
select:not(:disabled):hover {
  color: rgba(0,0,0,0.894);
  background: padding-box rgba(249,249,249,0.502);
}
button:not(:disabled):active,
input[type="button"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
select:not(:disabled):active {
  color: rgba(0,0,0,0.62);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
select:disabled {
  color: rgba(0,0,0,0.361);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
@media (prefers-color-scheme: dark) {
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  select {
    color: #fff;
    background: padding-box rgba(255,255,255,0.059);
    border-left: 1px solid rgba(255,255,255,0.071);
    border-top: 1px solid rgba(255,255,255,0.094);
    border-right: 1px solid rgba(255,255,255,0.071);
    border-bottom: 1px solid rgba(255,255,255,0.071);
  }
  button:not(:disabled):hover,
  input[type="button"]:not(:disabled):hover,
  input[type="reset"]:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  select:not(:disabled):hover {
    color: #fff;
    background: padding-box rgba(255,255,255,0.082);
  }
  button:not(:disabled):active,
  input[type="button"]:not(:disabled):active,
  input[type="reset"]:not(:disabled):active,
  input[type="submit"]:not(:disabled):active,
  select:not(:disabled):active {
    color: rgba(255,255,255,0.773);
    background: padding-box rgba(255,255,255,0.031);
    border: 1px solid rgba(255,255,255,0.071);
  }
  button:disabled,
  input[type="button"]:disabled,
  input[type="reset"]:disabled,
  input[type="submit"]:disabled,
  select:disabled {
    color: rgba(255,255,255,0.365);
    background: padding-box rgba(255,255,255,0.043);
    border: 1px solid rgba(255,255,255,0.071);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  select {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.059));
    border-left: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-top: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.094));
    border-right: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.161), rgba(255,255,255,0.071));
  }
  button:not(:disabled):hover,
  input[type="button"]:not(:disabled):hover,
  input[type="reset"]:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  select:not(:disabled):hover {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(249,249,249,0.502), rgba(255,255,255,0.082));
  }
  button:not(:disabled):active,
  input[type="button"]:not(:disabled):active,
  input[type="reset"]:not(:disabled):active,
  input[type="submit"]:not(:disabled):active,
  select:not(:disabled):active {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.031));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
  button:disabled,
  input[type="button"]:disabled,
  input[type="reset"]:disabled,
  input[type="submit"]:disabled,
  select:disabled {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.043));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
}
button.accent,
input[type="button"].accent,
input[type="reset"].accent,
input[type="submit"].accent,
select.accent {
  color: #fff;
  background: #3ac7bd;
  border-left: 1px solid rgba(255,255,255,0.078);
  border-top: 1px solid rgba(255,255,255,0.078);
  border-right: 1px solid rgba(255,255,255,0.078);
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
button.accent:not(:disabled):hover,
input[type="button"].accent:not(:disabled):hover,
input[type="reset"].accent:not(:disabled):hover,
input[type="submit"].accent:not(:disabled):hover,
select.accent:not(:disabled):hover {
  color: #fff;
  background: rgba(58,199,189,0.9);
}
button.accent:not(:disabled):active,
input[type="button"].accent:not(:disabled):active,
input[type="reset"].accent:not(:disabled):active,
input[type="submit"].accent:not(:disabled):active,
select.accent:not(:disabled):active {
  color: rgba(255,255,255,0.702);
  background: rgba(58,199,189,0.8);
  border: 1px solid rgba(255,255,255,0);
}
button.accent:disabled,
input[type="button"].accent:disabled,
input[type="reset"].accent:disabled,
input[type="submit"].accent:disabled,
select.accent:disabled {
  color: #fff;
  background: rgba(0,0,0,0.216);
  border: 1px solid rgba(255,255,255,0);
}
@media (prefers-color-scheme: dark) {
  button.accent,
  input[type="button"].accent,
  input[type="reset"].accent,
  input[type="submit"].accent,
  select.accent {
    color: #000;
    background: #55f8ec;
    border-left: 1px solid rgba(255,255,255,0.078);
    border-top: 1px solid rgba(255,255,255,0.078);
    border-right: 1px solid rgba(255,255,255,0.078);
    border-bottom: 1px solid rgba(0,0,0,0.137);
  }
  button.accent:not(:disabled):hover,
  input[type="button"].accent:not(:disabled):hover,
  input[type="reset"].accent:not(:disabled):hover,
  input[type="submit"].accent:not(:disabled):hover,
  select.accent:not(:disabled):hover {
    color: #000;
    background: rgba(85,248,236,0.9);
  }
  button.accent:not(:disabled):active,
  input[type="button"].accent:not(:disabled):active,
  input[type="reset"].accent:not(:disabled):active,
  input[type="submit"].accent:not(:disabled):active,
  select.accent:not(:disabled):active {
    color: rgba(0,0,0,0.502);
    background: rgba(85,248,236,0.8);
    border: 1px solid rgba(255,255,255,0);
  }
  button.accent:disabled,
  input[type="button"].accent:disabled,
  input[type="reset"].accent:disabled,
  input[type="submit"].accent:disabled,
  select.accent:disabled {
    color: rgba(255,255,255,0.529);
    background: rgba(255,255,255,0.157);
    border: 1px solid rgba(255,255,255,0);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  button.accent,
  input[type="button"].accent,
  input[type="reset"].accent,
  input[type="submit"].accent,
  select.accent {
    color: light-dark(#fff, #000);
    background: light-dark(#3ac7bd, #55f8ec);
    border-left: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-top: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-right: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.137));
  }
  button.accent:not(:disabled):hover,
  input[type="button"].accent:not(:disabled):hover,
  input[type="reset"].accent:not(:disabled):hover,
  input[type="submit"].accent:not(:disabled):hover,
  select.accent:not(:disabled):hover {
    color: light-dark(#fff, #000);
    background: light-dark(rgba(58,199,189,0.9), rgba(85,248,236,0.9));
  }
  button.accent:not(:disabled):active,
  input[type="button"].accent:not(:disabled):active,
  input[type="reset"].accent:not(:disabled):active,
  input[type="submit"].accent:not(:disabled):active,
  select.accent:not(:disabled):active {
    color: light-dark(rgba(255,255,255,0.702), rgba(0,0,0,0.502));
    background: light-dark(rgba(58,199,189,0.8), rgba(85,248,236,0.8));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
  button.accent:disabled,
  input[type="button"].accent:disabled,
  input[type="reset"].accent:disabled,
  input[type="submit"].accent:disabled,
  select.accent:disabled {
    color: light-dark(#fff, rgba(255,255,255,0.529));
    background: light-dark(rgba(0,0,0,0.216), rgba(255,255,255,0.157));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
}
select::-ms-expand {
  color: rgba(0,0,0,0.894);
  background: none;
  border: none;
}
select:not(:disabled):hover::-ms-expand {
  color: rgba(0,0,0,0.894);
}
select:not(:disabled):active::-ms-expand {
  color: rgba(0,0,0,0.62);
}
select:disabled::-ms-expand {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  select::-ms-expand {
    color: #fff;
  }
  select:not(:disabled):hover::-ms-expand {
    color: #fff;
  }
  select:not(:disabled):active::-ms-expand {
    color: rgba(255,255,255,0.773);
  }
  select:disabled::-ms-expand {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  select::-ms-expand {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  select:not(:disabled):hover::-ms-expand {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  select:not(:disabled):active::-ms-expand {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  select:disabled::-ms-expand {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
select.accent::-ms-expand {
  color: #fff;
}
select.accent:not(:disabled):hover::-ms-expand {
  color: #fff;
}
select.accent:not(:disabled):active::-ms-expand {
  color: rgba(255,255,255,0.702);
}
select.accent:disabled::-ms-expand {
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  select.accent::-ms-expand {
    color: #000;
  }
  select.accent:not(:disabled):hover::-ms-expand {
    color: #000;
  }
  select.accent:not(:disabled):active::-ms-expand {
    color: rgba(0,0,0,0.502);
  }
  select.accent:disabled::-ms-expand {
    color: rgba(255,255,255,0.529);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  select.accent::-ms-expand {
    color: light-dark(#fff, #000);
  }
  select.accent:not(:disabled):hover::-ms-expand {
    color: light-dark(#fff, #000);
  }
  select.accent:not(:disabled):active::-ms-expand {
    color: light-dark(rgba(255,255,255,0.702), rgba(0,0,0,0.502));
  }
  select.accent:disabled::-ms-expand {
    color: light-dark(#fff, rgba(255,255,255,0.529));
  }
}
input[type="color"] {
  color: #1b1b1b;
  background: padding-box #fbfbfb;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #ccc;
}
input[type="color"]:not(:disabled):hover {
  color: #1a1a1a;
  background: padding-box #f6f6f6;
}
input[type="color"]:not(:disabled):active {
  color: #5d5d5d;
  background: padding-box #f5f5f5;
  border: 1px solid #e5e5e5;
}
input[type="color"]:disabled {
  color: #9d9d9d;
  background: padding-box #f5f5f5;
  border: 1px solid #e5e5e5;
}
@media (prefers-color-scheme: dark) {
  input[type="color"] {
    color: #fff;
    background: padding-box #2d2d2d;
    border-left: 1px solid #303030;
    border-top: 1px solid #353535;
    border-right: 1px solid #303030;
    border-bottom: 1px solid #303030;
  }
  input[type="color"]:not(:disabled):hover {
    color: #fff;
    background: padding-box #323232;
  }
  input[type="color"]:not(:disabled):active {
    color: #cecece;
    background: padding-box #272727;
    border: 1px solid #303030;
  }
  input[type="color"]:disabled {
    color: #787878;
    background: padding-box #2a2a2a;
    border: 1px solid #303030;
  }
}
input[type="color"] {
  color: rgba(0,0,0,0.894);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  background: padding-box rgba(255,255,255,0.702);
  border-left: 1px solid rgba(0,0,0,0.059);
  border-top: 1px solid rgba(0,0,0,0.059);
  border-right: 1px solid rgba(0,0,0,0.059);
  border-bottom: 1px solid rgba(0,0,0,0.161);
}
input[type="color"]:not(:disabled):hover {
  color: rgba(0,0,0,0.894);
  background: padding-box rgba(249,249,249,0.502);
}
input[type="color"]:not(:disabled):active {
  color: rgba(0,0,0,0.62);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
input[type="color"]:disabled {
  color: rgba(0,0,0,0.361);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
input[type="color"]::-webkit-color-swatch {
  -webkit-border-radius: 2px;
          border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.059);
}
@media (prefers-color-scheme: dark) {
  input[type="color"] {
    color: #fff;
    background: padding-box rgba(255,255,255,0.059);
    border-left: 1px solid rgba(255,255,255,0.071);
    border-top: 1px solid rgba(255,255,255,0.094);
    border-right: 1px solid rgba(255,255,255,0.071);
    border-bottom: 1px solid rgba(255,255,255,0.071);
  }
  input[type="color"]:not(:disabled):hover {
    color: #fff;
    background: padding-box rgba(255,255,255,0.082);
  }
  input[type="color"]:not(:disabled):active {
    color: rgba(255,255,255,0.773);
    background: padding-box rgba(255,255,255,0.031);
    border: 1px solid rgba(255,255,255,0.071);
  }
  input[type="color"]:disabled {
    color: rgba(255,255,255,0.365);
    background: padding-box rgba(255,255,255,0.043);
    border: 1px solid rgba(255,255,255,0.071);
  }
  input[type="color"]::-webkit-color-swatch {
    border: 1px solid rgba(0,0,0,0.098);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  input[type="color"] {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.059));
    border-left: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-top: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.094));
    border-right: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.161), rgba(255,255,255,0.071));
  }
  input[type="color"]:not(:disabled):hover {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(249,249,249,0.502), rgba(255,255,255,0.082));
  }
  input[type="color"]:not(:disabled):active {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.031));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
  input[type="color"]:disabled {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.043));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
  input[type="color"]::-webkit-color-swatch {
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(0,0,0,0.098));
  }
}
input[type="file"]::-ms-browse {
  padding: 6px 11px;
  color: rgba(0,0,0,0.894);
  border-radius: 4px;
  background: padding-box rgba(255,255,255,0.702);
  border-left: 1px solid rgba(0,0,0,0.059);
  border-top: 1px solid rgba(0,0,0,0.059);
  border-right: 1px solid rgba(0,0,0,0.059);
  border-bottom: 1px solid rgba(0,0,0,0.161);
}
input[type="file"]:not(:disabled):hover::-ms-browse {
  color: rgba(0,0,0,0.894);
  background: padding-box rgba(249,249,249,0.502);
}
input[type="file"]:not(:disabled):active::-ms-browse {
  color: rgba(0,0,0,0.62);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
input[type="file"]:disabled::-ms-browse {
  color: rgba(0,0,0,0.361);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
@media (prefers-color-scheme: dark) {
  input[type="file"]::-ms-browse {
    color: #fff;
    background: padding-box rgba(255,255,255,0.059);
    border-left: 1px solid rgba(255,255,255,0.071);
    border-top: 1px solid rgba(255,255,255,0.094);
    border-right: 1px solid rgba(255,255,255,0.071);
    border-bottom: 1px solid rgba(255,255,255,0.071);
  }
  input[type="file"]:not(:disabled):hover::-ms-browse {
    color: #fff;
    background: padding-box rgba(255,255,255,0.082);
  }
  input[type="file"]:not(:disabled):active::-ms-browse {
    color: rgba(255,255,255,0.773);
    background: padding-box rgba(255,255,255,0.031);
    border: 1px solid rgba(255,255,255,0.071);
  }
  input[type="file"]:disabled::-ms-browse {
    color: rgba(255,255,255,0.365);
    background: padding-box rgba(255,255,255,0.043);
    border: 1px solid rgba(255,255,255,0.071);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  input[type="file"]::-ms-browse {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.059));
    border-left: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-top: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.094));
    border-right: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.161), rgba(255,255,255,0.071));
  }
  input[type="file"]:not(:disabled):hover::-ms-browse {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(249,249,249,0.502), rgba(255,255,255,0.082));
  }
  input[type="file"]:not(:disabled):active::-ms-browse {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.031));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
  input[type="file"]:disabled::-ms-browse {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.043));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
}
input[type="file"].accent::-ms-browse {
  color: #fff;
  background: #3ac7bd;
  border-left: 1px solid rgba(255,255,255,0.078);
  border-top: 1px solid rgba(255,255,255,0.078);
  border-right: 1px solid rgba(255,255,255,0.078);
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
input[type="file"].accent:not(:disabled):hover::-ms-browse {
  color: #fff;
  background: rgba(58,199,189,0.9);
}
input[type="file"].accent:not(:disabled):active::-ms-browse {
  color: rgba(255,255,255,0.702);
  background: rgba(58,199,189,0.8);
  border: 1px solid rgba(255,255,255,0);
}
input[type="file"].accent:disabled::-ms-browse {
  color: #fff;
  background: rgba(0,0,0,0.216);
  border: 1px solid rgba(255,255,255,0);
}
@media (prefers-color-scheme: dark) {
  input[type="file"].accent::-ms-browse {
    color: #000;
    background: #55f8ec;
    border-left: 1px solid rgba(255,255,255,0.078);
    border-top: 1px solid rgba(255,255,255,0.078);
    border-right: 1px solid rgba(255,255,255,0.078);
    border-bottom: 1px solid rgba(0,0,0,0.137);
  }
  input[type="file"].accent:not(:disabled):hover::-ms-browse {
    color: #000;
    background: rgba(85,248,236,0.9);
  }
  input[type="file"].accent:not(:disabled):active::-ms-browse {
    color: rgba(0,0,0,0.502);
    background: rgba(85,248,236,0.8);
    border: 1px solid rgba(255,255,255,0);
  }
  input[type="file"].accent:disabled::-ms-browse {
    color: rgba(255,255,255,0.529);
    background: rgba(255,255,255,0.157);
    border: 1px solid rgba(255,255,255,0);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  input[type="file"].accent::-ms-browse {
    color: light-dark(#fff, #000);
    background: light-dark(#3ac7bd, #55f8ec);
    border-left: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-top: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-right: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.137));
  }
  input[type="file"].accent:not(:disabled):hover::-ms-browse {
    color: light-dark(#fff, #000);
    background: light-dark(rgba(58,199,189,0.9), rgba(85,248,236,0.9));
  }
  input[type="file"].accent:not(:disabled):active::-ms-browse {
    color: light-dark(rgba(255,255,255,0.702), rgba(0,0,0,0.502));
    background: light-dark(rgba(58,199,189,0.8), rgba(85,248,236,0.8));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
  input[type="file"].accent:disabled::-ms-browse {
    color: light-dark(#fff, rgba(255,255,255,0.529));
    background: light-dark(rgba(0,0,0,0.216), rgba(255,255,255,0.157));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
}
input[type="file"]::-webkit-file-upload-button {
  padding: 6px 11px;
  color: rgba(0,0,0,0.894);
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: padding-box rgba(255,255,255,0.702);
  border-left: 1px solid rgba(0,0,0,0.059);
  border-top: 1px solid rgba(0,0,0,0.059);
  border-right: 1px solid rgba(0,0,0,0.059);
  border-bottom: 1px solid rgba(0,0,0,0.161);
}
input[type="file"]:not(:disabled):hover::-webkit-file-upload-button {
  color: rgba(0,0,0,0.894);
  background: padding-box rgba(249,249,249,0.502);
}
input[type="file"]:not(:disabled):active::-webkit-file-upload-button {
  color: rgba(0,0,0,0.62);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
input[type="file"]:disabled::-webkit-file-upload-button {
  color: rgba(0,0,0,0.361);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
@media (prefers-color-scheme: dark) {
  input[type="file"]::-webkit-file-upload-button {
    color: #fff;
    background: padding-box rgba(255,255,255,0.059);
    border-left: 1px solid rgba(255,255,255,0.071);
    border-top: 1px solid rgba(255,255,255,0.094);
    border-right: 1px solid rgba(255,255,255,0.071);
    border-bottom: 1px solid rgba(255,255,255,0.071);
  }
  input[type="file"]:not(:disabled):hover::-webkit-file-upload-button {
    color: #fff;
    background: padding-box rgba(255,255,255,0.082);
  }
  input[type="file"]:not(:disabled):active::-webkit-file-upload-button {
    color: rgba(255,255,255,0.773);
    background: padding-box rgba(255,255,255,0.031);
    border: 1px solid rgba(255,255,255,0.071);
  }
  input[type="file"]:disabled::-webkit-file-upload-button {
    color: rgba(255,255,255,0.365);
    background: padding-box rgba(255,255,255,0.043);
    border: 1px solid rgba(255,255,255,0.071);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  input[type="file"]::-webkit-file-upload-button {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.059));
    border-left: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-top: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.094));
    border-right: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.161), rgba(255,255,255,0.071));
  }
  input[type="file"]:not(:disabled):hover::-webkit-file-upload-button {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(249,249,249,0.502), rgba(255,255,255,0.082));
  }
  input[type="file"]:not(:disabled):active::-webkit-file-upload-button {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.031));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
  input[type="file"]:disabled::-webkit-file-upload-button {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.043));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
}
input[type="file"].accent::-webkit-file-upload-button {
  color: #fff;
  background: #3ac7bd;
  border-left: 1px solid rgba(255,255,255,0.078);
  border-top: 1px solid rgba(255,255,255,0.078);
  border-right: 1px solid rgba(255,255,255,0.078);
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
input[type="file"].accent:not(:disabled):hover::-webkit-file-upload-button {
  color: #fff;
  background: rgba(58,199,189,0.9);
}
input[type="file"].accent:not(:disabled):active::-webkit-file-upload-button {
  color: rgba(255,255,255,0.702);
  background: rgba(58,199,189,0.8);
  border: 1px solid rgba(255,255,255,0);
}
input[type="file"].accent:disabled::-webkit-file-upload-button {
  color: #fff;
  background: rgba(0,0,0,0.216);
  border: 1px solid rgba(255,255,255,0);
}
@media (prefers-color-scheme: dark) {
  input[type="file"].accent::-webkit-file-upload-button {
    color: #000;
    background: #55f8ec;
    border-left: 1px solid rgba(255,255,255,0.078);
    border-top: 1px solid rgba(255,255,255,0.078);
    border-right: 1px solid rgba(255,255,255,0.078);
    border-bottom: 1px solid rgba(0,0,0,0.137);
  }
  input[type="file"].accent:not(:disabled):hover::-webkit-file-upload-button {
    color: #000;
    background: rgba(85,248,236,0.9);
  }
  input[type="file"].accent:not(:disabled):active::-webkit-file-upload-button {
    color: rgba(0,0,0,0.502);
    background: rgba(85,248,236,0.8);
    border: 1px solid rgba(255,255,255,0);
  }
  input[type="file"].accent:disabled::-webkit-file-upload-button {
    color: rgba(255,255,255,0.529);
    background: rgba(255,255,255,0.157);
    border: 1px solid rgba(255,255,255,0);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  input[type="file"].accent::-webkit-file-upload-button {
    color: light-dark(#fff, #000);
    background: light-dark(#3ac7bd, #55f8ec);
    border-left: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-top: 1px solid light-dark(rgba(255,255,255,0.078), rgba(0,0,0,0.137));
    border-right: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.137));
  }
  input[type="file"].accent:not(:disabled):hover::-webkit-file-upload-button {
    color: light-dark(#fff, #000);
    background: padding-box light-dark(rgba(58,199,189,0.9), rgba(85,248,236,0.9));
  }
  input[type="file"].accent:not(:disabled):active::-webkit-file-upload-button {
    color: light-dark(rgba(255,255,255,0.702), rgba(0,0,0,0.502));
    background: padding-box light-dark(rgba(58,199,189,0.8), rgba(85,248,236,0.8));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
  input[type="file"].accent:disabled::-webkit-file-upload-button {
    color: light-dark(#fff, rgba(255,255,255,0.529));
    background: padding-box light-dark(rgba(0,0,0,0.216), rgba(255,255,255,0.157));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
}
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea {
  color: #1b1b1b;
  background: #fbfbfb;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #ccc;
}
input[type="datetime"]:not(:disabled):hover,
input[type="email"]:not(:disabled):hover,
input[type="number"]:not(:disabled):hover,
input[type="password"]:not(:disabled):hover,
input[type="search"]:not(:disabled):hover,
input[type="tel"]:not(:disabled):hover,
input[type="text"]:not(:disabled):hover,
input[type="url"]:not(:disabled):hover,
textarea:not(:disabled):hover {
  color: #1a1a1a;
  background: #f6f6f6;
}
input[type="datetime"]:not(:disabled):active,
input[type="email"]:not(:disabled):active,
input[type="number"]:not(:disabled):active,
input[type="password"]:not(:disabled):active,
input[type="search"]:not(:disabled):active,
input[type="tel"]:not(:disabled):active,
input[type="text"]:not(:disabled):active,
input[type="url"]:not(:disabled):active,
textarea:not(:disabled):active,
input[type="datetime"]:not(:disabled):focus:not(:active),
input[type="email"]:not(:disabled):focus:not(:active),
input[type="number"]:not(:disabled):focus:not(:active),
input[type="password"]:not(:disabled):focus:not(:active),
input[type="search"]:not(:disabled):focus:not(:active),
input[type="tel"]:not(:disabled):focus:not(:active),
input[type="text"]:not(:disabled):focus:not(:active),
input[type="url"]:not(:disabled):focus:not(:active),
textarea:not(:disabled):focus:not(:active) {
  color: #1b1b1b;
  background: #fff;
  border-bottom: 2px solid #3ac7bd;
}
input[type="datetime"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled,
input[type="url"]:disabled,
textarea:disabled {
  color: #a1a1a1;
  background: #9c9c9c;
  border: 1px solid #e5e5e5;
}
@media (prefers-color-scheme: dark) {
  input[type="datetime"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  textarea {
    color: #fff;
    background: #2d2d2d;
    border-left: 1px solid #303030;
    border-top: 1px solid #303030;
    border-right: 1px solid #303030;
    border-bottom: 1px solid #353535;
  }
  input[type="datetime"]:not(:disabled):hover,
  input[type="email"]:not(:disabled):hover,
  input[type="number"]:not(:disabled):hover,
  input[type="password"]:not(:disabled):hover,
  input[type="search"]:not(:disabled):hover,
  input[type="tel"]:not(:disabled):hover,
  input[type="text"]:not(:disabled):hover,
  input[type="url"]:not(:disabled):hover,
  textarea:not(:disabled):hover {
    color: #fff;
    background: #323232;
  }
  input[type="datetime"]:not(:disabled):active,
  input[type="email"]:not(:disabled):active,
  input[type="number"]:not(:disabled):active,
  input[type="password"]:not(:disabled):active,
  input[type="search"]:not(:disabled):active,
  input[type="tel"]:not(:disabled):active,
  input[type="text"]:not(:disabled):active,
  input[type="url"]:not(:disabled):active,
  textarea:not(:disabled):active,
  input[type="datetime"]:not(:disabled):focus:not(:active),
  input[type="email"]:not(:disabled):focus:not(:active),
  input[type="number"]:not(:disabled):focus:not(:active),
  input[type="password"]:not(:disabled):focus:not(:active),
  input[type="search"]:not(:disabled):focus:not(:active),
  input[type="tel"]:not(:disabled):focus:not(:active),
  input[type="text"]:not(:disabled):focus:not(:active),
  input[type="url"]:not(:disabled):focus:not(:active),
  textarea:not(:disabled):focus:not(:active) {
    color: #fff;
    background: #1f1f1f;
    border-bottom: 2px solid #55f8ec;
  }
  input[type="datetime"]:disabled,
  input[type="email"]:disabled,
  input[type="number"]:disabled,
  input[type="password"]:disabled,
  input[type="search"]:disabled,
  input[type="tel"]:disabled,
  input[type="text"]:disabled,
  input[type="url"]:disabled,
  textarea:disabled {
    color: #797979;
    background: #717171;
    border: 1px solid #303030;
  }
}
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
textarea {
  padding: 6px;
  font-family: Segoe UI Variable, Segoe UI, sans-serif;
  color: rgba(0,0,0,0.894);
  background: rgba(255,255,255,0.702);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  border-left: 1px solid rgba(0,0,0,0.059);
  border-top: 1px solid rgba(0,0,0,0.059);
  border-right: 1px solid rgba(0,0,0,0.059);
  border-bottom: 1px solid rgba(0,0,0,0.447);
}
input[type="datetime"]:not(:disabled):hover,
input[type="email"]:not(:disabled):hover,
input[type="number"]:not(:disabled):hover,
input[type="password"]:not(:disabled):hover,
input[type="search"]:not(:disabled):hover,
input[type="tel"]:not(:disabled):hover,
input[type="text"]:not(:disabled):hover,
input[type="url"]:not(:disabled):hover,
textarea:not(:disabled):hover {
  color: rgba(0,0,0,0.894);
  background: rgba(249,249,249,0.502);
}
input[type="datetime"]:not(:disabled):active,
input[type="email"]:not(:disabled):active,
input[type="number"]:not(:disabled):active,
input[type="password"]:not(:disabled):active,
input[type="search"]:not(:disabled):active,
input[type="tel"]:not(:disabled):active,
input[type="text"]:not(:disabled):active,
input[type="url"]:not(:disabled):active,
textarea:not(:disabled):active,
input[type="datetime"]:not(:disabled):focus:not(:active),
input[type="email"]:not(:disabled):focus:not(:active),
input[type="number"]:not(:disabled):focus:not(:active),
input[type="password"]:not(:disabled):focus:not(:active),
input[type="search"]:not(:disabled):focus:not(:active),
input[type="tel"]:not(:disabled):focus:not(:active),
input[type="text"]:not(:disabled):focus:not(:active),
input[type="url"]:not(:disabled):focus:not(:active),
textarea:not(:disabled):focus:not(:active) {
  outline: none;
  padding: 6px 6px 5px 6px;
  color: rgba(0,0,0,0.894);
  background: #fff;
  border-bottom: 2px solid #3ac7bd;
}
input[type="datetime"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled,
input[type="url"]:disabled,
textarea:disabled {
  color: rgba(1,1,1,0.361);
  background: rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
@media (prefers-color-scheme: dark) {
  input[type="datetime"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  textarea {
    color: #fff;
    background: rgba(255,255,255,0.059);
    border-left: 1px solid rgba(255,255,255,0.071);
    border-top: 1px solid rgba(255,255,255,0.071);
    border-right: 1px solid rgba(255,255,255,0.071);
    border-bottom: 1px solid rgba(255,255,255,0.545);
  }
  input[type="datetime"]:not(:disabled):hover,
  input[type="email"]:not(:disabled):hover,
  input[type="number"]:not(:disabled):hover,
  input[type="password"]:not(:disabled):hover,
  input[type="search"]:not(:disabled):hover,
  input[type="tel"]:not(:disabled):hover,
  input[type="text"]:not(:disabled):hover,
  input[type="url"]:not(:disabled):hover,
  textarea:not(:disabled):hover {
    color: #fff;
    background: rgba(255,255,255,0.082);
  }
  input[type="datetime"]:not(:disabled):active,
  input[type="email"]:not(:disabled):active,
  input[type="number"]:not(:disabled):active,
  input[type="password"]:not(:disabled):active,
  input[type="search"]:not(:disabled):active,
  input[type="tel"]:not(:disabled):active,
  input[type="text"]:not(:disabled):active,
  input[type="url"]:not(:disabled):active,
  textarea:not(:disabled):active,
  input[type="datetime"]:not(:disabled):focus:not(:active),
  input[type="email"]:not(:disabled):focus:not(:active),
  input[type="number"]:not(:disabled):focus:not(:active),
  input[type="password"]:not(:disabled):focus:not(:active),
  input[type="search"]:not(:disabled):focus:not(:active),
  input[type="tel"]:not(:disabled):focus:not(:active),
  input[type="text"]:not(:disabled):focus:not(:active),
  input[type="url"]:not(:disabled):focus:not(:active),
  textarea:not(:disabled):focus:not(:active) {
    color: #fff;
    background: rgba(30,30,30,0.702);
    border-bottom: 2px solid #55f8ec;
  }
  input[type="datetime"]:disabled,
  input[type="email"]:disabled,
  input[type="number"]:disabled,
  input[type="password"]:disabled,
  input[type="search"]:disabled,
  input[type="tel"]:disabled,
  input[type="text"]:disabled,
  input[type="url"]:disabled,
  textarea:disabled {
    color: rgba(254,254,254,0.365);
    background: rgba(255,255,255,0.043);
    border: 1px solid rgba(255,255,255,0.071);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  input[type="datetime"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  textarea {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.059));
    border-left: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-top: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-right: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.545));
  }
  input[type="datetime"]:not(:disabled):hover,
  input[type="email"]:not(:disabled):hover,
  input[type="number"]:not(:disabled):hover,
  input[type="password"]:not(:disabled):hover,
  input[type="search"]:not(:disabled):hover,
  input[type="tel"]:not(:disabled):hover,
  input[type="text"]:not(:disabled):hover,
  input[type="url"]:not(:disabled):hover,
  textarea:not(:disabled):hover {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: light-dark(rgba(249,249,249,0.502), rgba(255,255,255,0.082));
  }
  input[type="datetime"]:not(:disabled):active,
  input[type="email"]:not(:disabled):active,
  input[type="number"]:not(:disabled):active,
  input[type="password"]:not(:disabled):active,
  input[type="search"]:not(:disabled):active,
  input[type="tel"]:not(:disabled):active,
  input[type="text"]:not(:disabled):active,
  input[type="url"]:not(:disabled):active,
  textarea:not(:disabled):active,
  input[type="datetime"]:not(:disabled):focus:not(:active),
  input[type="email"]:not(:disabled):focus:not(:active),
  input[type="number"]:not(:disabled):focus:not(:active),
  input[type="password"]:not(:disabled):focus:not(:active),
  input[type="search"]:not(:disabled):focus:not(:active),
  input[type="tel"]:not(:disabled):focus:not(:active),
  input[type="text"]:not(:disabled):focus:not(:active),
  input[type="url"]:not(:disabled):focus:not(:active),
  textarea:not(:disabled):focus:not(:active) {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: light-dark(#fff, rgba(30,30,30,0.702));
    border-bottom: 2px solid light-dark(#3ac7bd, #55f8ec);
  }
  input[type="datetime"]:disabled,
  input[type="email"]:disabled,
  input[type="number"]:disabled,
  input[type="password"]:disabled,
  input[type="search"]:disabled,
  input[type="tel"]:disabled,
  input[type="text"]:disabled,
  input[type="url"]:disabled,
  textarea:disabled {
    color: light-dark(rgba(1,1,1,0.361), rgba(254,254,254,0.365));
    background: light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.043));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
}
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  color: #1b1b1b;
  background: #fbfbfb;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #ccc;
}
input[type="date"]:not(:disabled):hover,
input[type="datetime-local"]:not(:disabled):hover,
input[type="month"]:not(:disabled):hover,
input[type="time"]:not(:disabled):hover,
input[type="week"]:not(:disabled):hover {
  color: #1a1a1a;
  background: #f6f6f6;
}
input[type="date"]:not(:disabled):active:not(:focus),
input[type="datetime-local"]:not(:disabled):active:not(:focus),
input[type="month"]:not(:disabled):active:not(:focus),
input[type="time"]:not(:disabled):active:not(:focus),
input[type="week"]:not(:disabled):active:not(:focus) {
  color: #5d5d5d;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
}
input[type="date"]:not(:disabled):active,
input[type="datetime-local"]:not(:disabled):active,
input[type="month"]:not(:disabled):active,
input[type="time"]:not(:disabled):active,
input[type="week"]:not(:disabled):active,
input[type="date"]:not(:disabled):focus:not(:active),
input[type="datetime-local"]:not(:disabled):focus:not(:active),
input[type="month"]:not(:disabled):focus:not(:active),
input[type="time"]:not(:disabled):focus:not(:active),
input[type="week"]:not(:disabled):focus:not(:active) {
  color: #1b1b1b;
  background: #fff;
  border-bottom: 2px solid #3ac7bd;
}
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="time"]:disabled,
input[type="week"]:disabled {
  color: #a0a0a0;
  background: #fbfbfb;
  border: 1px solid #e5e5e5;
}
@media (prefers-color-scheme: dark) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"] {
    color: #fff;
    background: #2d2d2d;
    border-left: 1px solid #303030;
    border-top: 1px solid #353535;
    border-right: 1px solid #303030;
    border-bottom: 1px solid #303030;
  }
  input[type="date"]:not(:disabled):hover,
  input[type="datetime-local"]:not(:disabled):hover,
  input[type="month"]:not(:disabled):hover,
  input[type="time"]:not(:disabled):hover,
  input[type="week"]:not(:disabled):hover {
    color: #fff;
    background: #323232;
  }
  input[type="date"]:not(:disabled):active:not(:focus),
  input[type="datetime-local"]:not(:disabled):active:not(:focus),
  input[type="month"]:not(:disabled):active:not(:focus),
  input[type="time"]:not(:disabled):active:not(:focus),
  input[type="week"]:not(:disabled):active:not(:focus) {
    color: #cecece;
    background: #272727;
    border: 1px solid #303030;
  }
  input[type="date"]:not(:disabled):active,
  input[type="datetime-local"]:not(:disabled):active,
  input[type="month"]:not(:disabled):active,
  input[type="time"]:not(:disabled):active,
  input[type="week"]:not(:disabled):active,
  input[type="date"]:not(:disabled):focus:not(:active),
  input[type="datetime-local"]:not(:disabled):focus:not(:active),
  input[type="month"]:not(:disabled):focus:not(:active),
  input[type="time"]:not(:disabled):focus:not(:active),
  input[type="week"]:not(:disabled):focus:not(:active) {
    color: #fff;
    border-top: 1px solid #303030;
    border-bottom: 2px solid #55f8ec;
  }
  input[type="date"]:disabled,
  input[type="datetime-local"]:disabled,
  input[type="month"]:disabled,
  input[type="time"]:disabled,
  input[type="week"]:disabled {
    color: #7a7a7a;
    background: #2d2d2d;
    border: 1px solid #303030;
  }
}
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
  padding: 6px;
  font-family: Segoe UI Variable, Segoe UI, sans-serif;
  color: rgba(0,0,0,0.894);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  background: padding-box rgba(255,255,255,0.702);
  border-left: 1px solid rgba(0,0,0,0.059);
  border-top: 1px solid rgba(0,0,0,0.059);
  border-right: 1px solid rgba(0,0,0,0.059);
  border-bottom: 1px solid rgba(0,0,0,0.161);
}
input[type="date"]:not(:disabled):hover,
input[type="datetime-local"]:not(:disabled):hover,
input[type="month"]:not(:disabled):hover,
input[type="time"]:not(:disabled):hover,
input[type="week"]:not(:disabled):hover {
  color: rgba(0,0,0,0.894);
  background: padding-box rgba(249,249,249,0.502);
}
input[type="date"]:not(:disabled):active:not(:focus),
input[type="datetime-local"]:not(:disabled):active:not(:focus),
input[type="month"]:not(:disabled):active:not(:focus),
input[type="time"]:not(:disabled):active:not(:focus),
input[type="week"]:not(:disabled):active:not(:focus) {
  color: rgba(0,0,0,0.62);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
input[type="date"]:not(:disabled):active,
input[type="datetime-local"]:not(:disabled):active,
input[type="month"]:not(:disabled):active,
input[type="time"]:not(:disabled):active,
input[type="week"]:not(:disabled):active,
input[type="date"]:not(:disabled):focus:not(:active),
input[type="datetime-local"]:not(:disabled):focus:not(:active),
input[type="month"]:not(:disabled):focus:not(:active),
input[type="time"]:not(:disabled):focus:not(:active),
input[type="week"]:not(:disabled):focus:not(:active) {
  outline: none;
  padding: 6px 6px 5px 6px;
  color: rgba(0,0,0,0.894);
  background: #fff;
  border-bottom: 2px solid #3ac7bd;
}
input[type="date"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="time"]:disabled,
input[type="week"]:disabled {
  color: rgba(0,0,0,0.361);
  background: padding-box rgba(249,249,249,0.302);
  border: 1px solid rgba(0,0,0,0.059);
}
@media (prefers-color-scheme: dark) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"] {
    color: #fff;
    background: padding-box rgba(255,255,255,0.059);
    border-left: 1px solid rgba(255,255,255,0.071);
    border-top: 1px solid rgba(255,255,255,0.094);
    border-right: 1px solid rgba(255,255,255,0.071);
    border-bottom: 1px solid rgba(255,255,255,0.071);
  }
  input[type="date"]:not(:disabled):hover,
  input[type="datetime-local"]:not(:disabled):hover,
  input[type="month"]:not(:disabled):hover,
  input[type="time"]:not(:disabled):hover,
  input[type="week"]:not(:disabled):hover {
    color: #fff;
    background: padding-box rgba(255,255,255,0.082);
  }
  input[type="date"]:not(:disabled):active:not(:focus),
  input[type="datetime-local"]:not(:disabled):active:not(:focus),
  input[type="month"]:not(:disabled):active:not(:focus),
  input[type="time"]:not(:disabled):active:not(:focus),
  input[type="week"]:not(:disabled):active:not(:focus) {
    color: rgba(255,255,255,0.773);
    background: padding-box rgba(255,255,255,0.031);
    border: 1px solid rgba(255,255,255,0.071);
  }
  input[type="date"]:not(:disabled):active,
  input[type="datetime-local"]:not(:disabled):active,
  input[type="month"]:not(:disabled):active,
  input[type="time"]:not(:disabled):active,
  input[type="week"]:not(:disabled):active,
  input[type="date"]:not(:disabled):focus:not(:active),
  input[type="datetime-local"]:not(:disabled):focus:not(:active),
  input[type="month"]:not(:disabled):focus:not(:active),
  input[type="time"]:not(:disabled):focus:not(:active),
  input[type="week"]:not(:disabled):focus:not(:active) {
    color: #fff;
    background: rgba(30,30,30,0.702);
    border-top: 1px solid rgba(255,255,255,0.071);
    border-bottom: 2px solid #55f8ec;
  }
  input[type="date"]:disabled,
  input[type="datetime-local"]:disabled,
  input[type="month"]:disabled,
  input[type="time"]:disabled,
  input[type="week"]:disabled {
    color: rgba(255,255,255,0.365);
    background: padding-box rgba(255,255,255,0.043);
    border: 1px solid rgba(255,255,255,0.071);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"] {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.059));
    border-left: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-top: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.094));
    border-right: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.161), rgba(255,255,255,0.071));
  }
  input[type="date"]:not(:disabled):hover,
  input[type="datetime-local"]:not(:disabled):hover,
  input[type="month"]:not(:disabled):hover,
  input[type="time"]:not(:disabled):hover,
  input[type="week"]:not(:disabled):hover {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: padding-box light-dark(rgba(249,249,249,0.502), rgba(255,255,255,0.082));
  }
  input[type="date"]:not(:disabled):active:not(:focus),
  input[type="datetime-local"]:not(:disabled):active:not(:focus),
  input[type="month"]:not(:disabled):active:not(:focus),
  input[type="time"]:not(:disabled):active:not(:focus),
  input[type="week"]:not(:disabled):active:not(:focus) {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.031));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
  input[type="date"]:not(:disabled):active,
  input[type="datetime-local"]:not(:disabled):active,
  input[type="month"]:not(:disabled):active,
  input[type="time"]:not(:disabled):active,
  input[type="week"]:not(:disabled):active,
  input[type="date"]:not(:disabled):focus:not(:active),
  input[type="datetime-local"]:not(:disabled):focus:not(:active),
  input[type="month"]:not(:disabled):focus:not(:active),
  input[type="time"]:not(:disabled):focus:not(:active),
  input[type="week"]:not(:disabled):focus:not(:active) {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: light-dark(#fff, rgba(30,30,30,0.702));
    border-bottom: 2px solid light-dark(#3ac7bd, #55f8ec);
  }
  input[type="date"]:disabled,
  input[type="datetime-local"]:disabled,
  input[type="month"]:disabled,
  input[type="time"]:disabled,
  input[type="week"]:disabled {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    background: padding-box light-dark(rgba(249,249,249,0.302), rgba(255,255,255,0.043));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
}
option {
  padding: 6px 11px;
  color: rgba(0,0,0,0.894);
  background-color: #f2f2f2;
}
option:disabled {
  color: rgba(0,0,0,0.361);
  background-color: #f2f2f2;
}
@media (prefers-color-scheme: dark) {
  option {
    color: #fff;
    background-color: #2b2b2b;
  }
  option:disabled {
    color: rgba(255,255,255,0.365);
    background-color: #2b2b2b;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  option {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background-color: light-dark(#f2f2f2, #2b2b2b);
  }
  option:disabled {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    background-color: light-dark(#f2f2f2, #2b2b2b);
  }
}
permission {
  width: auto;
  height: auto;
  padding-bottom: 6px;
  padding-right: 11px;
  padding-top: 6px;
  padding-left: 11px;
  color: rgba(0,0,0,0.894);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  background-clip: padding-box;
  background-color: #fbfbfb;
  border-left: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #ccc;
}
permission:not(:invalid):hover {
  color: rgba(0,0,0,0.894);
  background-color: #f6f6f6;
}
permission:not(:invalid):active {
  color: rgba(0,0,0,0.62);
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
}
permission:invalid {
  color: rgba(0,0,0,0.361);
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
}
@media (prefers-color-scheme: dark) {
  permission {
    color: #fff;
    background-color: #2d2d2d;
    border-left: 1px solid #303030;
    border-top: 1px solid #303030;
    border-right: 1px solid #303030;
    border-bottom: 1px solid #353535;
  }
  permission:not(:invalid):hover {
    color: #fff;
    background-color: #323232;
  }
  permission:not(:invalid):active {
    color: rgba(255,255,255,0.773);
    background-color: #272727;
    border: 1px solid #303030;
  }
  permission:invalid {
    color: rgba(255,255,255,0.365);
    background-color: #2a2a2a;
    border: 1px solid #303030;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  permission {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background-color: light-dark(#fbfbfb, #2d2d2d);
    border-left: 1px solid light-dark(#e5e5e5, #303030);
    border-top: 1px solid light-dark(#e5e5e5, #303030);
    border-right: 1px solid light-dark(#e5e5e5, #303030);
    border-bottom: 1px solid light-dark(#ccc, #353535);
  }
  permission:not(:invalid):hover {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background-color: light-dark(#f6f6f6, #323232);
  }
  permission:not(:invalid):active {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
    background-color: light-dark(#f5f5f5, #272727);
    border: 1px solid light-dark(#e5e5e5, #303030);
  }
  permission:invalid {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
    background-color: light-dark(#f5f5f5, #2a2a2a);
    border: 1px solid light-dark(#e5e5e5, #303030);
  }
}
permission:granted {
  color: #fff;
  background-clip: border-box;
  background-color: #3ac7bd;
  border-left: 1px solid rgba(255,255,255,0.078);
  border-top: 1px solid rgba(255,255,255,0.078);
  border-right: 1px solid rgba(255,255,255,0.078);
  border-bottom: 1px solid rgba(0,0,0,0.4);
}
permission:granted:not(:invalid):hover {
  color: #fff;
  background-color: rgba(58,199,189,0.9);
}
permission:granted:not(:invalid):active {
  color: rgba(255,255,255,0.702);
  background-color: rgba(58,199,189,0.8);
  border: 1px solid rgba(255,255,255,0);
}
permission:granted:invalid {
  color: #fff;
  background-color: rgba(0,0,0,0.216);
  border: 1px solid rgba(255,255,255,0);
}
@media (prefers-color-scheme: dark) {
  permission:granted {
    color: #000;
    background-color: #55f8ec;
    border-left: 1px solid rgba(255,255,255,0.078);
    border-top: 1px solid rgba(255,255,255,0.078);
    border-right: 1px solid rgba(255,255,255,0.078);
    border-bottom: 1px solid rgba(0,0,0,0.137);
  }
  permission:granted:not(:invalid):hover {
    color: #000;
    background-color: rgba(85,248,236,0.9);
  }
  permission:granted:not(:invalid):active {
    color: rgba(0,0,0,0.502);
    background-color: rgba(85,248,236,0.8);
    border: 1px solid rgba(255,255,255,0);
  }
  permission:granted:invalid {
    color: rgba(255,255,255,0.529);
    background-color: rgba(255,255,255,0.157);
    border: 1px solid rgba(255,255,255,0);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  permission:granted {
    color: light-dark(#fff, #000);
    background-color: light-dark(#3ac7bd, #55f8ec);
    border-left: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-top: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-right: 1px solid light-dark(rgba(255,255,255,0.078), rgba(255,255,255,0.078));
    border-bottom: 1px solid light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.137));
  }
  permission:granted:not(:invalid):hover {
    color: light-dark(#fff, #000);
    background-color: light-dark(rgba(58,199,189,0.9), rgba(85,248,236,0.9));
  }
  permission:granted:not(:invalid):active {
    color: light-dark(rgba(255,255,255,0.702), rgba(0,0,0,0.502));
    background-color: light-dark(rgba(58,199,189,0.8), rgba(85,248,236,0.8));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
  permission:granted:invalid {
    color: light-dark(#fff, rgba(255,255,255,0.529));
    background-color: light-dark(rgba(0,0,0,0.216), rgba(255,255,255,0.157));
    border: 1px solid light-dark(rgba(255,255,255,0), rgba(255,255,255,0));
  }
}
.post-block .post-content {
  word-wrap: break-word;
}
.post-block .post-content a.post-title-link {
  color: rgba(0,0,0,0.894);
}
.post-block .post-content a.post-title-link:hover {
  color: rgba(0,0,0,0.62);
}
.post-block .post-content a.post-title-link:active {
  color: rgba(0,0,0,0.447);
}
.post-block .post-content a.post-title-link:not([href]),
.post-block .post-content a.post-title-link:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .post-block .post-content a.post-title-link {
    color: #fff;
  }
  .post-block .post-content a.post-title-link:hover {
    color: rgba(255,255,255,0.773);
  }
  .post-block .post-content a.post-title-link:active {
    color: rgba(255,255,255,0.529);
  }
  .post-block .post-content a.post-title-link:not([href]),
  .post-block .post-content a.post-title-link:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .post-block .post-content a.post-title-link {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .post-block .post-content a.post-title-link:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .post-block .post-content a.post-title-link:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .post-block .post-content a.post-title-link:not([href]),
  .post-block .post-content a.post-title-link:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.post-block .post-content .post-button {
  text-align: center;
}
.posts-collapse .post-content {
  margin-left: 16px;
  position: relative;
}
.posts-collapse .post-content .collection-title {
  font-size: 20px;
  position: relative;
}
.posts-collapse .post-content .collection-title::before {
  background: #3ac7bd;
  border: 4px solid #fff;
  margin-left: -9px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: ' ';
  height: 10px;
  width: 10px;
}
@media (prefers-color-scheme: dark) {
  .posts-collapse .post-content .collection-title::before {
    background: #55f8ec;
    border-color: #454545;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .posts-collapse .post-content .collection-title::before {
    background: light-dark(#3ac7bd, #55f8ec);
    border-color: light-dark(#fff, #454545);
  }
}
.posts-collapse .post-content .collection-year {
  font-size: 28px;
  font-weight: bold;
  margin: 60px 0;
  position: relative;
}
.posts-collapse .post-content .collection-year .collection-year-count {
  font-size: 20px;
  background: #3ac7bd;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  margin-left: 0.35em;
  padding: 0 4px 2px 4px;
}
@media (prefers-color-scheme: dark) {
  .posts-collapse .post-content .collection-year .collection-year-count {
    background: #55f8ec;
    color: #000;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .posts-collapse .post-content .collection-year .collection-year-count {
    background: light-dark(#3ac7bd, #55f8ec);
    color: light-dark(#fff, #000);
  }
}
.posts-collapse .post-content .collection-year::before {
  background: #3ac7bd;
  border: 3px solid #fff;
  margin-left: -7px;
  margin-top: -7px;
  position: absolute;
  top: 50%;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: ' ';
  height: 8px;
  width: 8px;
}
@media (prefers-color-scheme: dark) {
  .posts-collapse .post-content .collection-year::before {
    background: #55f8ec;
    border-color: #454545;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .posts-collapse .post-content .collection-year::before {
    background: light-dark(#3ac7bd, #55f8ec);
    border-color: light-dark(#fff, #454545);
  }
}
.posts-collapse .post-content .collection-header {
  display: block;
  margin-left: 20px;
}
.posts-collapse .post-content .collection-header small {
  color: rgba(0,0,0,0.62);
  margin-left: 5px;
}
@media (prefers-color-scheme: dark) {
  .posts-collapse .post-content .collection-header small {
    color: rgba(255,255,255,0.773);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .posts-collapse .post-content .collection-header small {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
}
.posts-collapse .post-content .post-header {
  margin: 30px 2px 0;
  padding-left: 15px;
  position: relative;
  font-size: 18.14px;
}
.posts-collapse .post-content .post-header::before {
  background: #3ac7bd;
  border: 2px solid #fff;
  left: -7px;
  position: absolute;
  top: 7px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
  content: ' ';
  height: 6px;
  width: 6px;
}
.posts-collapse .post-content .post-header:hover::before {
  background: #2d968f;
}
.posts-collapse .post-content .post-header:active::before {
  background: #3ac7bd;
}
@media (prefers-color-scheme: dark) {
  .posts-collapse .post-content .post-header::before {
    background: #55f8ec;
    border-color: #454545;
  }
  .posts-collapse .post-content .post-header:hover::before {
    background: #86eae3;
  }
  .posts-collapse .post-content .post-header:active::before {
    background: #55f8ec;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .posts-collapse .post-content .post-header::before {
    background: light-dark(#3ac7bd, #55f8ec);
    border-color: light-dark(#fff, #454545);
  }
  .posts-collapse .post-content .post-header:hover::before {
    background: light-dark(#2d968f, #86eae3);
  }
  .posts-collapse .post-content .post-header:active::before {
    background: light-dark(#3ac7bd, #55f8ec);
  }
}
.posts-collapse .post-content .post-meta-container {
  display: inline;
  font-size: 12px;
  margin-right: 10px;
}
.posts-collapse .post-content .post-title {
  display: inline;
}
.posts-collapse .post-content::before {
  background: rgba(0,0,0,0.447);
  content: ' ';
  height: 100%;
  margin-left: -2px;
  position: absolute;
  top: 1.6em;
  width: 4px;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
}
@media (prefers-color-scheme: dark) {
  .posts-collapse .post-content::before {
    background: rgba(255,255,255,0.545);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .posts-collapse .post-content::before {
    background: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.545));
  }
}
.posts-expand .post-header {
  margin-bottom: 20px;
  text-align: center;
}
@media (min-width: 1200px) {
  .posts-expand .post-header {
    margin-bottom: 40px;
  }
}
@media (max-width: 567px) {
  .posts-expand .post-header {
    margin-bottom: 10px;
  }
}
.posts-expand .post-title {
  margin: 0;
  margin: initial;
  text-align: center;
  word-wrap: break-word;
}
.post-meta {
  margin-top: 4px;
  text-align: center;
  font-size: 12px;
}
.post-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 1em;
  padding: 10px 5px 0;
}
.post-nav .post-nav-item a svg {
  fill: rgba(0,0,0,0.894);
  margin-bottom: -3px;
}
.post-nav .post-nav-item a:hover svg {
  fill: rgba(0,0,0,0.62);
}
.post-nav .post-nav-item a:active svg {
  fill: rgba(0,0,0,0.447);
}
.post-nav .post-nav-item a:not([href]) svg,
.post-nav .post-nav-item a:not([href]):hover svg {
  fill: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .post-nav .post-nav-item a svg {
    fill: #fff;
  }
  .post-nav .post-nav-item a:hover svg {
    fill: rgba(255,255,255,0.773);
  }
  .post-nav .post-nav-item a:active svg {
    fill: rgba(255,255,255,0.529);
  }
  .post-nav .post-nav-item a:not([href]) svg,
  .post-nav .post-nav-item a:not([href]):hover svg {
    fill: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .post-nav .post-nav-item a svg {
    fill: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .post-nav .post-nav-item a:hover svg {
    fill: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .post-nav .post-nav-item a:active svg {
    fill: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .post-nav .post-nav-item a:not([href]) svg,
  .post-nav .post-nav-item a:not([href]):hover svg {
    fill: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.post-nav .post-nav-item-prev {
  float: left;
  text-align: left;
}
.post-nav .post-nav-item-next {
  float: right;
  text-align: right;
}
.post-eof {
  background: rgba(0,0,0,0.447);
  height: 1px;
  margin: 8px auto 10px;
  width: 8%;
}
.post-block:last-of-type .post-eof {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .post-eof {
    background: rgba(255,255,255,0.545);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .post-eof {
    background: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.545));
  }
}
.post-tags {
  margin-top: 1rem;
  text-align: center;
}
.post-tags a svg {
  fill: rgba(0,0,0,0.894);
  margin-bottom: -3px;
}
.post-tags a:hover svg {
  fill: rgba(0,0,0,0.62);
}
.post-tags a:active svg {
  fill: rgba(0,0,0,0.447);
}
.post-tags a:not([href]) svg,
.post-tags a:not([href]):hover svg {
  fill: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .post-tags a svg {
    fill: #fff;
  }
  .post-tags a:hover svg {
    fill: rgba(255,255,255,0.773);
  }
  .post-tags a:active svg {
    fill: rgba(255,255,255,0.529);
  }
  .post-tags a:not([href]) svg,
  .post-tags a:not([href]):hover svg {
    fill: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .post-tags a svg {
    fill: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .post-tags a:hover svg {
    fill: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .post-tags a:active svg {
    fill: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .post-tags a:not([href]) svg,
  .post-tags a:not([href]):hover svg {
    fill: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.category-all-page .category-all-title {
  text-align: center;
}
.category-all-page .category-all {
  margin-top: 20px;
}
.category-all-page .category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-all-page .category-list-item {
  margin: 5px 10px;
}
.category-all-page .category-list-count {
  font-size: 12px;
  background: #3ac7bd;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  color: #fff;
  font-weight: bold;
  line-height: 1;
  margin-left: 0.35em;
  padding: 0 4px 2px 4px;
}
@media (prefers-color-scheme: dark) {
  .category-all-page .category-list-count {
    background: #55f8ec;
    color: #000;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .category-all-page .category-list-count {
    background: light-dark(#3ac7bd, #55f8ec);
    color: light-dark(#fff, #000);
  }
}
.category-all-page .category-list-child {
  padding-left: 10px;
}
.tag-cloud {
  text-align: center;
  line-height: normal;
}
.tag-cloud a {
  display: inline-block;
  margin: 10px;
}
.tag-cloud-0 {
  color: rgba(0,0,0,0.361);
}
.tag-cloud-0:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-0:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-0:not([href]),
.tag-cloud-0:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-0 {
    color: rgba(255,255,255,0.365);
  }
  .tag-cloud-0:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-0:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-0:not([href]),
  .tag-cloud-0:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-0 {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
  .tag-cloud-0:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-0:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-0:not([href]),
  .tag-cloud-0:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-1 {
  color: rgba(0,0,0,0.414);
}
.tag-cloud-1:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-1:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-1:not([href]),
.tag-cloud-1:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-1 {
    color: rgba(255,255,255,0.428);
  }
  .tag-cloud-1:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-1:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-1:not([href]),
  .tag-cloud-1:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-1 {
    color: light-dark(rgba(0,0,0,0.414), rgba(255,255,255,0.428));
  }
  .tag-cloud-1:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-1:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-1:not([href]),
  .tag-cloud-1:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-2 {
  color: rgba(0,0,0,0.467);
}
.tag-cloud-2:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-2:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-2:not([href]),
.tag-cloud-2:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-2 {
    color: rgba(255,255,255,0.492);
  }
  .tag-cloud-2:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-2:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-2:not([href]),
  .tag-cloud-2:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-2 {
    color: light-dark(rgba(0,0,0,0.467), rgba(255,255,255,0.492));
  }
  .tag-cloud-2:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-2:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-2:not([href]),
  .tag-cloud-2:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-3 {
  color: rgba(0,0,0,0.521);
}
.tag-cloud-3:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-3:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-3:not([href]),
.tag-cloud-3:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-3 {
    color: rgba(255,255,255,0.555);
  }
  .tag-cloud-3:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-3:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-3:not([href]),
  .tag-cloud-3:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-3 {
    color: light-dark(rgba(0,0,0,0.521), rgba(255,255,255,0.555));
  }
  .tag-cloud-3:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-3:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-3:not([href]),
  .tag-cloud-3:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-4 {
  color: rgba(0,0,0,0.574);
}
.tag-cloud-4:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-4:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-4:not([href]),
.tag-cloud-4:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-4 {
    color: rgba(255,255,255,0.619);
  }
  .tag-cloud-4:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-4:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-4:not([href]),
  .tag-cloud-4:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-4 {
    color: light-dark(rgba(0,0,0,0.574), rgba(255,255,255,0.619));
  }
  .tag-cloud-4:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-4:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-4:not([href]),
  .tag-cloud-4:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-5 {
  color: rgba(0,0,0,0.627);
}
.tag-cloud-5:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-5:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-5:not([href]),
.tag-cloud-5:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-5 {
    color: rgba(255,255,255,0.682);
  }
  .tag-cloud-5:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-5:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-5:not([href]),
  .tag-cloud-5:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-5 {
    color: light-dark(rgba(0,0,0,0.627), rgba(255,255,255,0.682));
  }
  .tag-cloud-5:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-5:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-5:not([href]),
  .tag-cloud-5:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-6 {
  color: rgba(0,0,0,0.681);
}
.tag-cloud-6:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-6:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-6:not([href]),
.tag-cloud-6:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-6 {
    color: rgba(255,255,255,0.746);
  }
  .tag-cloud-6:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-6:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-6:not([href]),
  .tag-cloud-6:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-6 {
    color: light-dark(rgba(0,0,0,0.681), rgba(255,255,255,0.746));
  }
  .tag-cloud-6:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-6:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-6:not([href]),
  .tag-cloud-6:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-7 {
  color: rgba(0,0,0,0.734);
}
.tag-cloud-7:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-7:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-7:not([href]),
.tag-cloud-7:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-7 {
    color: rgba(255,255,255,0.809);
  }
  .tag-cloud-7:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-7:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-7:not([href]),
  .tag-cloud-7:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-7 {
    color: light-dark(rgba(0,0,0,0.734), rgba(255,255,255,0.809));
  }
  .tag-cloud-7:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-7:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-7:not([href]),
  .tag-cloud-7:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-8 {
  color: rgba(0,0,0,0.787);
}
.tag-cloud-8:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-8:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-8:not([href]),
.tag-cloud-8:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-8 {
    color: rgba(255,255,255,0.873);
  }
  .tag-cloud-8:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-8:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-8:not([href]),
  .tag-cloud-8:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-8 {
    color: light-dark(rgba(0,0,0,0.787), rgba(255,255,255,0.873));
  }
  .tag-cloud-8:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-8:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-8:not([href]),
  .tag-cloud-8:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-9 {
  color: rgba(0,0,0,0.841);
}
.tag-cloud-9:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-9:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-9:not([href]),
.tag-cloud-9:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-9 {
    color: rgba(255,255,255,0.936);
  }
  .tag-cloud-9:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-9:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-9:not([href]),
  .tag-cloud-9:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-9 {
    color: light-dark(rgba(0,0,0,0.841), rgba(255,255,255,0.936));
  }
  .tag-cloud-9:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-9:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-9:not([href]),
  .tag-cloud-9:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
.tag-cloud-10 {
  color: rgba(0,0,0,0.894);
}
.tag-cloud-10:hover {
  color: rgba(0,0,0,0.62);
}
.tag-cloud-10:active {
  color: rgba(0,0,0,0.447);
}
.tag-cloud-10:not([href]),
.tag-cloud-10:not([href]):hover {
  color: rgba(0,0,0,0.361);
}
@media (prefers-color-scheme: dark) {
  .tag-cloud-10 {
    color: #fff;
  }
  .tag-cloud-10:hover {
    color: rgba(255,255,255,0.773);
  }
  .tag-cloud-10:active {
    color: rgba(255,255,255,0.529);
  }
  .tag-cloud-10:not([href]),
  .tag-cloud-10:not([href]):hover {
    color: rgba(255,255,255,0.365);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .tag-cloud-10 {
    color: light-dark(rgba(0,0,0,0.894), #fff);
  }
  .tag-cloud-10:hover {
    color: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .tag-cloud-10:active {
    color: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
  .tag-cloud-10:not([href]),
  .tag-cloud-10:not([href]):hover {
    color: light-dark(rgba(0,0,0,0.361), rgba(255,255,255,0.365));
  }
}
:root:has(.index-hover) {
  -webkit-scroll-snap-type: y mandatory;
      -ms-scroll-snap-type: y mandatory;
          scroll-snap-type: y mandatory;
}
.cover:has(.index-hover),
.cover:has(.index-hover)~.main {
  scroll-snap-align: start;
}
.index-hover {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.index-hover .index-container {
  margin: 50px 16px;
}
.index-hover .index-container .index-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255,255,255,0.702);
  border: 1px solid rgba(0,0,0,0.059);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .index-hover .index-container .index-card {
    background: rgba(255,255,255,0.051);
    border: 1px solid rgba(255,255,255,0.071);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .index-hover .index-container .index-card {
    background: light-dark(rgba(255,255,255,0.702), rgba(255,255,255,0.051));
    border: 1px solid light-dark(rgba(0,0,0,0.059), rgba(255,255,255,0.071));
  }
}
.index-hover .index-container .index-card .description .avatar-container {
  margin-bottom: 20px;
}
.index-hover .index-container .index-card .description .avatar-container .avatar {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  -webkit-border-radius: 75px;
     -moz-border-radius: 75px;
          border-radius: 75px;
  -o-object-fit: cover;
     object-fit: cover;
}
.index-hover .index-container .index-card .articles {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 20px;
}
.index-hover .index-container .index-card .articles .title {
  font-size: 24px;
  margin-bottom: 10px;
}
.index-hover .index-container .index-card .articles a {
  margin: 4px 0;
}
.index-hover .index-container .index-card .articles .more {
  padding: 6px 0 0 0;
}
@media (max-height: 688px) {
  .index-hover .index-container .index-card .articles {
    display: none;
  }
}
/*
 * pace.js v1.2.4 | Default theme
 * https://github.com/CodeByZach/pace/
 * Licensed MIT © HubSpot, Inc.
 */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #3ac7bd;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
@media (prefers-color-scheme: dark) {
  .pace .pace-progress {
    background: #55f8ec;
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .pace .pace-progress {
    background: light-dark(#3ac7bd, #55f8ec);
  }
}
.search-pop-overlay {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: background 0.167s;
  -o-transition: background 0.167s;
  -moz-transition: background 0.167s;
  transition: background 0.167s;
  visibility: hidden;
  z-index: 4;
  background: none;
}
.search-active .search-pop-overlay {
  visibility: visible;
  background: rgba(0,0,0,0.302);
}
@media (prefers-color-scheme: dark) {
  .search-active .search-pop-overlay {
    background: rgba(0,0,0,0.302);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .search-active .search-pop-overlay {
    background: light-dark(rgba(0,0,0,0.302), rgba(0,0,0,0.302));
  }
}
.search-pop-overlay .search-popup {
  margin: auto;
  padding: 24px;
  min-width: 320px;
  max-width: 548px;
  min-height: 184px;
  max-height: 756px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  overflow: auto;
  color: rgba(0,0,0,0.894);
  background: #f3f3f3;
  border: 1px solid rgba(117,117,117,0.4);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}
@media (max-width: 320px) {
  .search-pop-overlay .search-popup {
    min-width: 100%;
  }
}
@media (max-width: 548px) {
  .search-pop-overlay .search-popup {
    max-width: 100%;
  }
}
@media (max-height: 184px) {
  .search-pop-overlay .search-popup {
    min-height: 100%;
  }
}
@media (max-height: 756px) {
  .search-pop-overlay .search-popup {
    max-height: 100%;
  }
}
@media (prefers-color-scheme: dark) {
  .search-pop-overlay .search-popup {
    color: #fff;
    background: #202020;
    border: 1px solid rgba(117,117,117,0.4);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .search-pop-overlay .search-popup {
    color: light-dark(rgba(0,0,0,0.894), #fff);
    background: light-dark(#f3f3f3, #202020);
    border: 1px solid light-dark(rgba(117,117,117,0.4), rgba(117,117,117,0.4));
  }
}
.search-pop-overlay .search-popup .search-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 12px;
}
.search-pop-overlay .search-popup .search-header .search-title {
  font-size: 20px;
  margin: 0;
}
.search-pop-overlay .search-popup .search-header .popup-btn-close {
  float: right;
  padding: 6px 8px;
  fill: currentColor;
}
.search-pop-overlay .search-popup .search-header .popup-btn-close svg {
  margin-bottom: -3px;
}
.search-pop-overlay .search-popup .search-input-container {
  margin-bottom: 10px;
  position: relative;
  width: 100%;
  float: left;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.search-pop-overlay .search-popup .search-input-container input {
  width: 100%;
  padding-right: 30px;
}
.search-pop-overlay .search-popup .search-input-container input:not(:disabled):hover +.search-icon {
  fill: rgba(0,0,0,0.62);
}
.search-pop-overlay .search-popup .search-input-container input:not(:disabled):active +.search-icon {
  fill: rgba(0,0,0,0.447);
}
.search-pop-overlay .search-popup .search-input-container input:not(:disabled):active,
.search-pop-overlay .search-popup .search-input-container input:not(:disabled):focus-within:not(:active) {
  padding-right: 30px;
}
@media (prefers-color-scheme: dark) {
  .search-pop-overlay .search-popup .search-input-container input:not(:disabled):hover +.search-icon {
    fill: rgba(255,255,255,0.773);
  }
  .search-pop-overlay .search-popup .search-input-container input:not(:disabled):active +.search-icon {
    fill: rgba(255,255,255,0.529);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .search-pop-overlay .search-popup .search-input-container input:not(:disabled):hover +.search-icon {
    fill: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
  .search-pop-overlay .search-popup .search-input-container input:not(:disabled):active +.search-icon {
    fill: light-dark(rgba(0,0,0,0.447), rgba(255,255,255,0.529));
  }
}
.search-pop-overlay .search-popup .search-input-container .search-icon {
  position: absolute;
  top: 6.5px;
  right: 10px;
  fill: rgba(0,0,0,0.62);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .search-pop-overlay .search-popup .search-input-container .search-icon {
    fill: rgba(255,255,255,0.773);
  }
}
@supports (color: light-dark(#f00, #f00)) {
  .search-pop-overlay .search-popup .search-input-container .search-icon {
    fill: light-dark(rgba(0,0,0,0.62), rgba(255,255,255,0.773));
  }
}
.search-pop-overlay .search-popup .search-result-container .search-result-list {
  padding: 0 0 0 18px;
}