@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  color-scheme: light;
  --vp-font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
  --vp-font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --vp-c-bg: #ffeedd;
  --vp-c-bg-alt: #fff4e8;
  --vp-c-bg-elv: #fff8f1;
  --vp-c-bg-soft: #f7e6d8;
  --vp-c-bg-mute: #f0dccd;

  --vp-c-border: rgba(37, 30, 24, 0.12);
  --vp-c-divider: rgba(37, 30, 24, 0.12);
  --vp-c-gutter: rgba(37, 30, 24, 0.08);

  --vp-c-text-1: #251e18;
  --vp-c-text-2: #5f5449;
  --vp-c-text-3: #87786c;

  --vp-c-default-1: #5f5449;
  --vp-c-default-2: #4d4339;
  --vp-c-default-3: #3a312a;
  --vp-c-default-soft: rgba(95, 84, 73, 0.12);

  --vp-c-brand-1: #cb743b;
  --vp-c-brand-2: #b96430;
  --vp-c-brand-3: #8d4720;
  --vp-c-brand-soft: rgba(203, 116, 59, 0.14);

  --vp-c-tip-1: #2e8c7d;
  --vp-c-tip-2: #257265;
  --vp-c-tip-3: #1b564d;
  --vp-c-tip-soft: rgba(46, 140, 125, 0.14);

  --vp-c-warning-1: #a15c2d;
  --vp-c-warning-2: #8b4f26;
  --vp-c-warning-3: #6a3d1d;
  --vp-c-warning-soft: rgba(161, 92, 45, 0.14);

  --vp-c-danger-1: #9a4a43;
  --vp-c-danger-2: #813a34;
  --vp-c-danger-3: #662d28;
  --vp-c-danger-soft: rgba(154, 74, 67, 0.14);

  --vp-shadow-1: 0 1px 10px rgba(73, 48, 32, 0.08);
  --vp-shadow-2: 0 8px 24px rgba(73, 48, 32, 0.08);
  --vp-shadow-3: 0 18px 48px rgba(73, 48, 32, 0.12);
  --vp-shadow-4: 0 3px 15px rgba(203, 116, 59, 0.22);
  --vp-shadow-5: 0 3px 15px rgba(46, 140, 125, 0.18);

  --vp-home-hero-name-color: #251e18;
  --vp-home-hero-name-background: none;
  --vp-home-hero-image-background-image:
    radial-gradient(circle at 30% 30%, rgba(203, 116, 59, 0.32), transparent 48%),
    radial-gradient(circle at 72% 38%, rgba(46, 140, 125, 0.28), transparent 44%),
    radial-gradient(circle at 50% 75%, rgba(72, 62, 54, 0.14), transparent 56%);
  --vp-home-hero-image-filter: blur(58px);

  --vp-button-brand-border: transparent;
  --vp-button-brand-text: #fffaf6;
  --vp-button-brand-bg: var(--vp-c-brand-1);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: #fffaf6;
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: #fffaf6;
  --vp-button-brand-active-bg: var(--vp-c-brand-3);

  --vp-button-alt-border: rgba(37, 30, 24, 0.14);
  --vp-button-alt-text: var(--vp-c-text-1);
  --vp-button-alt-bg: rgba(255, 248, 241, 0.82);
  --vp-button-alt-hover-border: rgba(37, 30, 24, 0.18);
  --vp-button-alt-hover-text: var(--vp-c-text-1);
  --vp-button-alt-hover-bg: #fff8f1;
  --vp-button-alt-active-border: rgba(37, 30, 24, 0.22);
  --vp-button-alt-active-text: var(--vp-c-text-1);
  --vp-button-alt-active-bg: #f7e6d8;

  --vp-custom-block-tip-border: rgba(46, 140, 125, 0.2);
  --vp-custom-block-tip-text: var(--vp-c-text-1);
  --vp-custom-block-tip-bg: rgba(46, 140, 125, 0.08);
  --vp-custom-block-tip-code-bg: rgba(46, 140, 125, 0.12);

  --vp-custom-block-warning-border: rgba(161, 92, 45, 0.2);
  --vp-custom-block-warning-bg: rgba(161, 92, 45, 0.08);
  --vp-custom-block-danger-border: rgba(154, 74, 67, 0.2);
  --vp-custom-block-danger-bg: rgba(154, 74, 67, 0.08);

  --vp-nav-bg-color: rgba(255, 238, 221, 0.82);
  --vp-sidebar-bg-color: rgba(255, 244, 232, 0.96);
}

.dark {
  color-scheme: dark;
  --vp-c-bg: #1e1815;
  --vp-c-bg-alt: #251e1a;
  --vp-c-bg-elv: #2d2520;
  --vp-c-bg-soft: #342b25;
  --vp-c-bg-mute: #43372f;

  --vp-c-border: rgba(255, 238, 221, 0.12);
  --vp-c-divider: rgba(255, 238, 221, 0.12);
  --vp-c-gutter: rgba(255, 238, 221, 0.08);

  --vp-c-text-1: #f7e6d8;
  --vp-c-text-2: #d7c1b0;
  --vp-c-text-3: #b29886;

  --vp-c-default-1: #d7c1b0;
  --vp-c-default-2: #ead8ca;
  --vp-c-default-3: #f7e6d8;
  --vp-c-default-soft: rgba(215, 193, 176, 0.12);

  --vp-c-brand-1: #f0a06b;
  --vp-c-brand-2: #f7b283;
  --vp-c-brand-3: #ffd0af;
  --vp-c-brand-soft: rgba(240, 160, 107, 0.18);

  --vp-c-tip-1: #67c0b2;
  --vp-c-tip-2: #85d4c7;
  --vp-c-tip-3: #b6efe7;
  --vp-c-tip-soft: rgba(103, 192, 178, 0.18);

  --vp-c-warning-1: #f1ab72;
  --vp-c-warning-2: #f6bc8c;
  --vp-c-warning-3: #ffd2ab;
  --vp-c-warning-soft: rgba(241, 171, 114, 0.18);

  --vp-c-danger-1: #df8f86;
  --vp-c-danger-2: #ebb0a7;
  --vp-c-danger-3: #f7d0ca;
  --vp-c-danger-soft: rgba(223, 143, 134, 0.18);

  --vp-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.22);
  --vp-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.26);
  --vp-shadow-3: 0 18px 48px rgba(0, 0, 0, 0.34);
  --vp-shadow-4: 0 3px 15px rgba(240, 160, 107, 0.18);
  --vp-shadow-5: 0 3px 15px rgba(103, 192, 178, 0.16);

  --vp-home-hero-name-color: #f7e6d8;
  --vp-button-brand-text: #1e1815;
  --vp-button-brand-hover-text: #1e1815;
  --vp-button-brand-active-text: #1e1815;

  --vp-button-alt-border: rgba(255, 238, 221, 0.14);
  --vp-button-alt-text: var(--vp-c-text-1);
  --vp-button-alt-bg: rgba(52, 43, 37, 0.86);
  --vp-button-alt-hover-border: rgba(255, 238, 221, 0.2);
  --vp-button-alt-hover-text: var(--vp-c-text-1);
  --vp-button-alt-hover-bg: rgba(67, 55, 47, 0.92);
  --vp-button-alt-active-border: rgba(255, 238, 221, 0.24);
  --vp-button-alt-active-text: var(--vp-c-text-1);
  --vp-button-alt-active-bg: rgba(77, 64, 55, 0.96);

  --vp-nav-bg-color: rgba(30, 24, 21, 0.8);
  --vp-sidebar-bg-color: rgba(37, 30, 26, 0.96);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(203, 116, 59, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(46, 140, 125, 0.1), transparent 24%),
    var(--vp-c-bg);
}

.VPApp,
.Layout {
  background: transparent;
}

.VPNavBar,
.VPNavScreen,
.VPLocalNav,
.VPDocAsideOutline .content,
.VPSidebar {
  backdrop-filter: blur(18px);
}

/* .VPNavBar { */
/*   border-bottom: 1px solid var(--vp-c-border); */
/* } */

.VPNavBar .title span,
.VPNavBarMenuLink,
.VPLocalNav .menu-text,
.VPSidebarItem.level-0 .text,
.VPSidebarItem.level-1 .text,
.VPMenuLink .link,
.VPFlyout .text,
.VPSidebarItem .text,
.VPDocAsideOutline .outline-title {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.VPNavBar .title {
  min-inline-size: 0;
}

.VPNavBar .content {
  flex: 0 0 auto;
}

.VPNavBarTitle {
  min-inline-size: 0;
}

.VPNavBarTitle .title {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  max-inline-size: calc(100vw - 5rem);
}

.VPNavBarTitle .title > span:not(.dyne-brand) {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: clamp(0.04em, 0.8vw, 0.2em);
  font-size: clamp(1rem, 4vw, 2rem);
}

.VPNavBarTitle .title > span:not(.dyne-brand),
.VPNavBarMenuLink,
.VPLocalNav .menu-text,
.VPSidebarItem.level-0 .text,
.VPSidebarItem.level-1 .text,
.VPMenuLink .link,
.VPFlyout .text,
.VPDocAsideOutline .outline-title {
  font-family: "Syne", var(--vp-font-family-base);
}

.VPNavBarTitle .title,
.VPNavBarMenuLink,
.VPLink.link {
  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.VPNavBarTitle .title:hover,
.VPNavBarMenuLink:hover,
.VPLink.link:hover {
  color: var(--vp-c-brand-1);
}

.dyne-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;

}

.dyne-brand__mark,
.dyne-brand__logotype {
  display: block;
  filter: none;
  transition: filter 160ms ease, opacity 160ms ease;
}

.dyne-brand__mark {
  width: 4rem;
  height: 4rem;
}

.dyne-brand__logotype {
  width: 4rem;
  height: auto;
}

.dyne-brand.nav {
  flex: 0 0 auto;
  margin-right: clamp(0.75rem, 6vw, 4rem);
}

.dyne-brand.nav .dyne-brand__mark {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
}

.dyne-brand.nav .dyne-brand__logotype {
  flex: 0 0 auto;
  width: 4rem;
  height: auto;
  max-width: none;
}

.doc-brand {
  margin-bottom: 1rem;
}

.dyne-brand.doc {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.dyne-brand.doc .dyne-brand__mark {
  width: 2rem;
  height: 2rem;
}

.dyne-brand.doc .dyne-brand__logotype {
  height: 2.4rem;
}

.dark .dyne-brand__mark,
.dark .dyne-brand__logotype {
  filter: invert(1);
}

.VPButton,
.VPNavBarSearchButton,
.VPSocialLink,
.VPSwitch {
  border-radius: 999px;
}

.VPButton {
  box-shadow: var(--vp-shadow-1);
  font-weight: 700;
}

.VPButton.brand:hover {
  box-shadow: var(--vp-shadow-4);
}

.VPButton.alt:hover {
  box-shadow: var(--vp-shadow-1);
}

.VPNavBarSearchButton,
.VPSocialLink,
.VPSwitch {
  border: 1px solid var(--vp-c-border);
  background: rgba(255, 248, 241, 0.6);
}

.dark .VPNavBarSearchButton,
.dark .VPSocialLink,
.dark .VPSwitch {
  background: rgba(52, 43, 37, 0.72);
}

.VPNavBarSearchButton:hover,
.VPSocialLink:hover,
.VPSwitch:hover {
  border-color: var(--vp-c-brand-1);
  box-shadow: var(--vp-shadow-4);
}

.VPHero .name,
.VPHero .text,
.VPDoc h1,
.VPDoc h2,
.VPDoc h3,
.VPDoc h4,
.VPDoc .custom-block-title {
  font-family: "Syne", var(--vp-font-family-base);
  letter-spacing: -0.03em;
}

.VPHero .name {
  font-weight: 800;
}

.VPHero .text {
  color: var(--vp-c-text-1);
  font-weight: 700;
}

.VPHero .tagline {
  color: var(--vp-c-text-2);
  font-size: 1.05rem;
  max-width: 40rem;
}

.VPHero .image-bg {
  opacity: 0.95;
}

.VPFeature,
.custom-block,
.vp-code-group,
div[class*='language-'],
.vp-doc table {
  border: 1px solid var(--vp-c-border);
  border-radius: 28px;
  box-shadow: var(--vp-shadow-1);
}

.VPFeature {
  background: linear-gradient(180deg, rgba(255, 248, 241, 0.84), rgba(255, 244, 232, 0.92));
}

.dark .VPFeature {
  background: linear-gradient(180deg, rgba(52, 43, 37, 0.88), rgba(37, 30, 26, 0.96));
}

.VPFeature .title {
  font-family: "Syne", var(--vp-font-family-base);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.VPFeature .details {
  color: var(--vp-c-text-2);
}

.vp-doc a {
  color: var(--vp-c-brand-2);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

.vp-doc a:hover {
  color: var(--vp-c-brand-1);
}

.vp-doc h1,
.vp-doc h2,
.vp-doc h3,
.vp-doc h4 {
  color: var(--vp-c-text-1);
}

.vp-doc h1 {
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 1.08;
}

.vp-doc h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.14;
}

.vp-doc h3,
.vp-doc h4,
.vp-doc h5,
.vp-doc h6 {
  line-height: 1.18;
}

.vp-doc p,
.vp-doc li {
  color: var(--vp-c-text-2);
}

.vp-doc strong,
.vp-doc th {
  color: var(--vp-c-text-1);
}

.vp-doc blockquote {
  border-left: 4px solid var(--vp-c-brand-1);
  background: rgba(203, 116, 59, 0.06);
  border-radius: 0 20px 20px 0;
  color: var(--vp-c-text-1);
  font-style: normal;
}

.dark .vp-doc blockquote {
  background: rgba(240, 160, 107, 0.08);
}

.vp-doc code {
  color: var(--vp-c-tip-2);
}

.vp-doc :not(pre) > code {
  border: 1px solid rgba(46, 140, 125, 0.16);
  border-radius: 999px;
  background: rgba(46, 140, 125, 0.08);
  padding: 0.2rem 0.5rem;
}

.dark .vp-doc :not(pre) > code {
  border-color: rgba(103, 192, 178, 0.18);
  background: rgba(103, 192, 178, 0.12);
}

div[class*='language-'] {
  background: #251e18;
  box-shadow: var(--vp-shadow-3);
}

.dark div[class*='language-'] {
  background: #171210;
}

.vp-doc table {
  overflow: hidden;
  background: rgba(255, 248, 241, 0.7);
}

.dark .vp-doc table {
  background: rgba(52, 43, 37, 0.72);
}

.vp-doc tr:nth-child(2n) {
  background: rgba(37, 30, 24, 0.03);
}

.dark .vp-doc tr:nth-child(2n) {
  background: rgba(255, 238, 221, 0.03);
}

.vp-doc th,
.vp-doc td {
  border-color: var(--vp-c-border);
}

.VPSidebarItem.is-active > .item .link > .text,
.VPSidebarItem.is-active > .item .text,
.VPDocAsideOutline .outline-link.active {
  color: var(--vp-c-brand-1);
}

.VPSidebarItem.level-0 > .item {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.VPDocFooter .pager-link,
.VPDocFooter .edit-link-button {
  border: 1px solid var(--vp-c-border);
  border-radius: 24px;
  background: rgba(255, 248, 241, 0.72);
}

.dark .VPDocFooter .pager-link,
.dark .VPDocFooter .edit-link-button {
  background: rgba(52, 43, 37, 0.8);
}

.VPDocFooter .pager-link:hover,
.VPDocFooter .edit-link-button:hover {
  border-color: var(--vp-c-brand-1);
  box-shadow: var(--vp-shadow-4);
}

.dyne-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--vp-c-border);
  background: var(--vp-nav-bg-color);
  color: var(--vp-c-text-1);
  backdrop-filter: blur(18px);
}

.dyne-footer__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 2.5rem 1.5rem 3rem;
}

.dyne-footer__content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
  opacity: 0.72;
}

.dyne-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}

.dyne-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: inherit;
}

.dyne-footer__mark {
  width: 10rem;
  height: 10rem;
}

.dyne-footer__logotype {
  width: 9rem;
  height: auto;
}

.dyne-footer__mark,
.dyne-footer__logotype {
  display: block;
  transition: filter 160ms ease, opacity 160ms ease;
}

.dark .dyne-footer__mark,
.dark .dyne-footer__logotype {
  filter: invert(1);
}

.dyne-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  min-width: 0;
}

.dyne-footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  max-width: 32rem;
}

.dyne-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.875rem;
  min-block-size: 1.875rem;
  border: 1px solid var(--vp-c-border);
  border-radius: 999px;
  color: var(--vp-c-text-1);
  text-decoration: none;
  background: rgba(255, 248, 241, 0.6);
}

.dyne-social-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.dark .dyne-footer__social {
  background: rgba(52, 43, 37, 0.72);
}

.dyne-footer__social:hover {
  border-color: var(--vp-c-brand-1);
  color: var(--vp-c-brand-1);
  box-shadow: var(--vp-shadow-4);
}

.dyne-footer__legal {
  max-width: 48rem;
  text-align: right;
  color: var(--vp-c-text-2);
  font-size: 0.875rem;
  line-height: 1.6;
}

.dyne-footer__legal p {
  margin: 0;
}

.dyne-footer__legal p + p {
  margin-top: 1rem;
}

.dyne-footer__legal a {
  color: var(--vp-c-text-1);
  font-weight: 700;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

.dyne-footer__legal a:hover {
  color: var(--vp-c-brand-1);
}

@media (max-width: 959px) {
  .dyne-brand.nav {
    margin-right: 0.75rem;
  }

  .dyne-brand.nav .dyne-brand__mark {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
  }

  .dyne-brand.nav .dyne-brand__logotype {
    flex: 0 0 auto;
    width: 3rem;
    height: auto;
    max-width: none;
  }

  .VPHero .name,
  .vp-doc h1 {
    letter-spacing: -0.04em;
  }

  .VPFeature,
  .custom-block,
  .vp-code-group,
  div[class*='language-'],
  .vp-doc table {
    border-radius: 22px;
  }
}

@media (max-width: 480px) {
  .dyne-brand.nav {
    gap: 0.375rem;
    margin-right: 0.5rem;
  }

  .dyne-brand.nav .dyne-brand__mark {
    width: 2.5rem;
    height: 2.5rem;
  }

  .dyne-brand.nav .dyne-brand__logotype {
    display: none;
  }

  .VPNavBarTitle .title > span:not(.dyne-brand) {
    font-size: clamp(0.75rem, 4vw, 1rem);
    letter-spacing: 0.08em;
  }
}

@media (max-width: 639px) {
  .dyne-footer__inner {
    padding: 2rem 1.5rem 2.5rem;
  }

  .dyne-footer__content {
    flex-direction: column;
    align-items: flex-end;
  }

  .dyne-footer__top {
    flex-direction: column;
    align-items: flex-end;
  }

  .dyne-footer__socials {
    justify-content: flex-end;
    max-width: none;
  }

  .dyne-footer__legal {
    font-size: 0.8125rem;
  }
}

/* frei0r content primitives */
.frei0r-stats,
.software-grid,
.resource-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 1.5rem 0;
}

.frei0r-stat,
.software-card,
.resource-card {
  border: 1px solid var(--vp-c-divider);
  border-radius: 12px;
  background: var(--vp-c-bg-soft);
  padding: 1rem;
}

.frei0r-stat strong {
  display: block;
  color: var(--vp-c-brand-1);
  font-size: 1.8rem;
  line-height: 1.2;
}

.software-card h3,
.resource-card h3 {
  margin: 0 0 0.4rem;
  border: 0;
  padding: 0;
  font-size: 1.05rem;
}

.software-card p,
.resource-card p {
  margin: 0;
}

.status-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  background: var(--vp-c-brand-soft);
  color: var(--vp-c-brand-1);
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 650;
}

.project-callout {
  margin: 1.5rem 0;
  border-left: 4px solid var(--vp-c-brand-1);
  background: var(--vp-c-bg-soft);
  padding: 1rem 1.25rem;
}

.project-callout > :first-child {
  margin-top: 0;
}

.project-callout > :last-child {
  margin-bottom: 0;
}

.demo-video {
  display: block;
  width: min(100%, 720px);
  margin: 1.5rem auto;
  border-radius: 12px;
  background: #000;
}

.muted {
  color: var(--vp-c-text-2);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}