:root {
  color-scheme: dark;
  --fz-bg: #080a09;
  --fz-panel: #0c0e0d;
  --fz-ink: #e8e6df;
  --fz-muted: #a3a49f;
  --fz-faint: #62645f;
  --fz-rule: #3a3c38;
  --fz-rule-strong: #666861;
  --fz-signal: #d8ff00;
  --fz-green: #62dc8b;
  --fz-sans: "Helvetica Neue", "PingFang SC", "Noto Sans CJK SC", "Noto Sans CJK JP", Arial, sans-serif;
  --fz-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --pf-v5-global--FontFamily--sans-serif: var(--fz-sans);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--fz-sans);
  --pf-v5-global--BackgroundColor--100: var(--fz-bg);
  --pf-v5-global--BackgroundColor--200: var(--fz-panel);
  --pf-v5-global--Color--100: var(--fz-ink);
  --pf-v5-global--Color--200: var(--fz-muted);
  --pf-v5-global--primary-color--100: var(--fz-signal);
  --pf-v5-global--primary-color--200: #e5ff5b;
  --pf-v5-global--active-color--100: var(--fz-signal);
  --pf-v5-global--BorderColor--100: var(--fz-rule);
}

html,
body,
#app {
  min-width: 320px;
  min-height: 100%;
  background: var(--fz-bg) !important;
  color: var(--fz-ink);
  font-family: var(--fz-sans) !important;
  -webkit-font-smoothing: antialiased;
}

body::before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image: linear-gradient(rgb(232 230 223 / 2.2%) 1px, transparent 1px), linear-gradient(90deg, rgb(232 230 223 / 2.2%) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000, transparent 76%);
}

.pf-v5-c-page {
  width: calc(100% - clamp(16px, 2.2vw, 32px));
  max-width: 1600px;
  min-height: calc(100vh - clamp(16px, 2.2vw, 32px));
  margin: clamp(8px, 1.1vw, 16px) auto;
  border: 1px solid var(--fz-rule-strong);
  background: rgb(8 10 9 / 94%) !important;
  overflow: clip;
}

.pf-v5-c-masthead {
  min-height: 72px;
  border-bottom: 1px solid var(--fz-rule);
  background: var(--fz-panel) !important;
  box-shadow: none !important;
}

.pf-v5-c-brand {
  width: 172px;
  height: 28px;
}

.pf-v5-c-page__sidebar {
  border-right: 1px solid var(--fz-rule);
  background: var(--fz-panel) !important;
  box-shadow: none !important;
}

.pf-v5-c-nav__link {
  border-radius: 0 !important;
  color: var(--fz-muted) !important;
  font: 12px/1.5 var(--fz-mono) !important;
}

.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link:focus,
.pf-v5-c-nav__link.pf-m-current {
  background: rgb(216 255 0 / 5%) !important;
  color: var(--fz-signal) !important;
}

.pf-v5-c-nav__link.pf-m-current::after {
  border-color: var(--fz-signal) !important;
}

.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background: transparent !important;
}

.pf-v5-c-page__main-section {
  padding: clamp(24px, 4vw, 56px) !important;
}

h1,
.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-title.pf-m-3xl,
.pf-v5-c-title.pf-m-4xl {
  color: var(--fz-ink) !important;
  font-family: var(--fz-sans) !important;
  font-weight: 620 !important;
  letter-spacing: -0.045em;
}

.pf-v5-c-content,
.pf-v5-c-form,
.pf-v5-c-description-list,
.pf-v5-c-data-list {
  color: var(--fz-ink);
  font-family: var(--fz-sans) !important;
}

.pf-v5-c-card,
.pf-v5-c-data-list,
.pf-v5-c-form-control,
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu {
  border-color: var(--fz-rule) !important;
  border-radius: 0 !important;
  background: rgb(12 14 13 / 96%) !important;
  box-shadow: none !important;
}

.pf-v5-c-card__title,
.pf-v5-c-description-list__term,
.pf-v5-c-form__label-text {
  color: var(--fz-muted) !important;
  font-family: var(--fz-mono) !important;
}

.pf-v5-c-form-control,
input,
select,
textarea {
  color: var(--fz-ink) !important;
  font-family: var(--fz-sans) !important;
}

.pf-v5-c-form-control:focus-within,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--fz-signal) !important;
  outline-color: var(--fz-signal) !important;
}

.pf-v5-c-button {
  border-radius: 0 !important;
  font-family: var(--fz-sans) !important;
  font-weight: 600 !important;
}

.pf-v5-c-button.pf-m-primary {
  border-color: var(--fz-green) !important;
  background: var(--fz-green) !important;
  color: #080a09 !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  border-color: #86eaa6 !important;
  background: #86eaa6 !important;
}

.pf-v5-c-button.pf-m-link,
a {
  color: var(--fz-signal);
  text-underline-offset: 4px;
}

.pf-v5-c-menu-toggle,
.pf-v5-c-dropdown__toggle {
  border-radius: 0 !important;
  color: var(--fz-ink) !important;
}

@media (max-width: 768px) {
  .pf-v5-c-page__main-section {
    padding: 24px 20px !important;
  }

  .pf-v5-c-brand {
    width: 148px;
  }
}