@charset "UTF-8";
@import url("/assets/css/fonts/metropolis.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
@import url("./a.css");
@import url("./selection.css");
html {
  --gray-50: #f1f1f1;
  --gray-100: #e4e4e4;
  --gray-200: #c9c9c9;
  --gray-300: #adadad;
  --gray-400: #929292;
  --gray-500: #808080;
  --gray-600: #5f5f5f;
  --gray-700: #4d4d4d;
  --gray-800: #333333;
  --gray-900: #1a1a1a;
  --gray-950: #0d0d0d;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f36969;
  --red-500: #dd5656;
  --red-600: #d04848;
  --red-700: #cc3d3d;
  --red-800: #c53232;
  --red-900: #b32828;
  --red-950: #902222;
  --lime-50: #f7fee7;
  --lime-100: #ecfccb;
  --lime-200: #d9f99d;
  --lime-300: #bef264;
  --lime-400: #a3e635;
  --lime-500: #84cc16;
  --lime-600: #65a30d;
  --lime-700: #4d7c0f;
  --lime-800: #3f6212;
  --lime-900: #365314;
  --lime-950: #26390e;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #0c311b;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #152149;
  --aqua-50: #f2fcfa;
  --aqua-100: #d2f7f0;
  --aqua-200: #a6efe1;
  --aqua-300: #7de7d4;
  --aqua-400: #51dfc5;
  --aqua-500: #20d6b5;
  --aqua-600: #1aab91;
  --aqua-700: #13806d;
  --aqua-800: #0d5648;
  --aqua-900: #062b24;
  --aqua-950: #132521;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --orange-950: #52200f;
  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --yellow-950: #3c260b;
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #242154;
  --violet-50: #f5f3ff;
  --violet-100: #ede9fe;
  --violet-200: #ddd6fe;
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --violet-800: #5b21b6;
  --violet-900: #4c1d95;
  --violet-950: #311558;
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;
  --purple-950: #2f1143;
  --fuchsia-50: #fdf4ff;
  --fuchsia-100: #fae8ff;
  --fuchsia-200: #f5d0fe;
  --fuchsia-300: #f0abfc;
  --fuchsia-400: #e879f9;
  --fuchsia-500: #d946ef;
  --fuchsia-600: #c026d3;
  --fuchsia-700: #a21caf;
  --fuchsia-800: #86198f;
  --fuchsia-900: #701a75;
  --fuchsia-950: #38103a;
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --pink-950: #430e23;
  --rose-50: #fff1f2;
  --rose-100: #ffe4e6;
  --rose-200: #fecdd3;
  --rose-300: #fda4af;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-700: #be123c;
  --rose-800: #9f1239;
  --rose-900: #881337;
  --rose-950: #4a0d20;
}

* {
  box-sizing: border-box;
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 0.5s ease both old-page-out;
}

::view-transition-new(root) {
  animation: 0.5s ease both new-page-in;
}

@keyframes new-page-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes old-page-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes showup {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html {
  --theme-color-50: var(--aqua-50);
  --theme-color-100: var(--aqua-100);
  --theme-color-200: var(--aqua-200);
  --theme-color-300: var(--aqua-300);
  --theme-color-400: var(--aqua-400);
  --theme-color-500: var(--aqua-500);
  --theme-color-600: var(--aqua-600);
  --theme-color-700: var(--aqua-700);
  --theme-color-800: var(--aqua-800);
  --theme-color-900: var(--aqua-900);
  --theme-color-950: var(--aqua-950);
  --color-info: var(--blue-400);
  --color-warn: var(--orange-400);
  --color-danger: var(--red-400);
  --color-safe: var(--green-500);
  --color-neutral: var(--gray-400);
  --header-height: 3.6rem;
  --toolbox-width: 3.6rem;
  --transition-time-fast: 0.1s;
  --transition-time-common: 0.2s;
  --transition-time-slow: 0.3s;
  --transition-time-slower: 0.4s;
  --nav-menu-width: 18em;
  --general-shadow: 0px 4px 8px var(--shadow-color);
  --font-common: "Metropolis", "Noto Sans SC", sans-serif, "Material Symbols Outlined";
  --font-serif: "Noto Serif SC", serif;
  --font-monospace: monospace;
  --font-size-regular: 16px;
}

html {
  --accent-color: var(--theme-color-500);
  --accent-color-dk: var(--theme-color-600);
  --background-color: #fcfcfc;
  --background-color-dk: #ededed;
  --background-color-lt: #fefefe;
  --text-color: #0f0f0f;
  --text-color-lt: var(--gray-400);
  --text-color-selected: #ffffff;
  --text-color-contrast: var(--text-color-selected);
  --shadow-color: #0f0f0f22;
  --shadow-color-dk: #00000044;
  --link-color: var(--theme-color-600);
  --link-color-visited: var(--theme-color-700);
  --border-color: #cfcfcf;
  --selection-background: color-mix(in srgb, var(--accent-color-dk) 60%, transparent 60%);
  --button-bg: var(--gray-100);
  --button-bg-focus: var(--gray-200);
  --button-bg-disabled: var(--gray-300);
  --header-bg: #fcfcfccc;
  --input-bg: #00000011;
}

html.theme-dark {
  --accent-color: var(--theme-color-600);
  --accent-color-dk: var(--theme-color-700);
  --background-color: #1e1e1e;
  --background-color-dk: #181818;
  --background-color-lt: #212121;
  --text-color: #fcfcfc;
  --text-color-lt: #888888;
  --text-color-selected: #fcfcfc;
  --text-color-contrast: #161616;
  --shadow-color: #66666622;
  --shadow-color-dk: #00000044;
  --link-color: var(--theme-color-500);
  --link-color-visited: var(--theme-color-600);
  --border-color: #3c3c3c;
  --selection-background: color-mix(in srgb, var(--accent-color-dk) 60%, transparent 60%);
  --button-bg: var(--gray-800);
  --button-bg-focus: var(--gray-700);
  --button-bg-disabled: var(--gray-900);
  --header-bg: #1e1e1ecc;
  --input-bg: #00000033;
}

html.thin-header {
  --header-height: 2.2em ;
}

html {
  scroll-behavior: smooth;
  line-height: 1.5;
  font-family: var(--font-common);
  font-size: var(--font-size-regular);
  font-weight: 300;
  scrollbar-color: var(--accent-color) var(--background-color);
}

body {
  margin: 0;
  background: var(--background-color);
  color: var(--text-color);
  position: relative;
  min-height: 100vh;
  transition: all var(--transition-time-common);
}

hr {
  border: none;
  border-top: solid var(--border-color) 2px;
}
hr.break {
  width: 70%;
  border-top-style: dashed;
}
hr.secondary {
  border-top: solid var(--text-color-lt) 1px;
}

ul {
  padding-inline-start: 1.8em;
}
ul ul {
  padding-inline-start: 1.2em;
}
ul.file-list {
  list-style-type: none;
  padding-inline-start: 0em;
  line-height: 1em;
}
ul.file-list li::before {
  content: "├";
  margin-right: 0.2em;
}
ul.file-list li:last-child::before {
  content: "└";
}

code {
  font-family: var(--font-monospace);
  background-color: var(--input-bg);
  font-size: 0.9em;
  padding: 0 0.2em;
}

.keycap, kbd {
  font-family: var(--font-monospace);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  box-shadow: inset 0 -1px 0 0 var(--border-color);
  border-radius: 0.2em;
  padding: 0 0.2em;
  font-size: 0.8em;
}

.page-content, #page-content {
  margin-inline: min(10rem, 10vw);
  min-height: 60vh;
  padding: 1em;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  max-width: min-content;
}
figure img {
  display: block;
}
figure figcaption {
  border-bottom: 0.15em solid var(--accent-color);
  text-align: center;
  margin: 0;
  padding: 0.2em;
}

nav {
  padding-block-start: 1em;
}

img.adaptive-full-width {
  width: 80%;
}

details summary {
  cursor: pointer;
  background-color: var(--background-color-dk);
  padding: 0.2rem;
  transition: var(--transition-time-common);
}
details summary:is(:hover, :focus) {
  background-color: var(--accent-color);
  color: var(--text-color-contrast);
}

dialog {
  border: none;
  color: var(--text-color);
  background-color: var(--background-color);
  box-shadow: var(--general-shadow);
  animation: showup var(--transition-time-common) ease-in;
}

dialog:modal::backdrop {
  backdrop-filter: blur(2px);
}

@media only screen and (max-width: 768px) {
  html {
    --header-height: 3.6rem;
    --toolbox-width: 3.6rem;
    --nav-menu-width: 16em;
    --font-size-regular: 14px;
  }
  .float, .float.left, .float.right {
    max-width: 100%;
    --breakout-margin: 0;
  }
  .page-content {
    padding: 0.6em;
    margin-inline: 1em;
  }
  img.adaptive-full-width {
    width: 100%;
  }
}
.f-bold, .f-b {
  font-weight: bold;
}

.f-italic, .f-i {
  font-style: italic;
}

.f-small, .f-s {
  font-size: small;
}

.f-large, .f-l {
  font-size: large;
}

.f-larger, .f-lr {
  font-size: larger;
}

.f-xl {
  font-size: x-large;
}

.f-xxl {
  font-size: xx-large;
}

.align-center {
  text-align: center;
  max-width: unset;
}

.align-end {
  text-align: end;
  max-width: unset;
}

.flex {
  display: flex;
}

.flex-center, .flex.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex.column {
  flex-direction: column;
}

:is(.flex-center, .flex.center).left {
  justify-content: left;
}

.flex-wrap, .flex.wrap {
  flex-wrap: wrap;
  gap: 0.2em;
}

.padding-all-small {
  padding: 0.4rem;
}

.no-select {
  -webkit-user-select: none;
  user-select: none;
}

.svg-monocolor {
  fill: var(--text-color);
}

.adapt-header {
  min-width: var(--header-height);
}

.adapt-header-strict {
  width: var(--header-height);
  height: var(--header-height);
}

.no-bg {
  background: none !important;
}

.float {
  --breakout-margin: -2em;
  max-width: 25vw;
  background-color: var(--background-color-dk);
}

.float-right, .float.right {
  float: right;
  margin-left: 1em;
}
.float-right.breakout, .float.right.breakout {
  margin-right: var(--breakout-margin);
}

.float-left, .float.left {
  float: left;
  margin-right: 1em;
}
.float-left.breakout, .float.left.breakout {
  margin-left: var(--breakout-margin);
}

.full-width {
  width: 100%;
}

.margin-auto {
  margin: auto;
}

.lh-unset {
  line-height: unset;
}

.lh-initial {
  line-height: initial;
}

.txt-secondary {
  color: var(--text-color-lt);
}

.float-div {
  z-index: 99;
  min-width: var(--header-height);
  min-height: var(--header-height);
  box-shadow: var(--general-shadow);
}

.word-break-all {
  word-break: break-all;
}

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