:root {
  color-scheme: light dark;
  --bg: light-dark(#f6f6f6, #031b2b);
  --bg-alt: light-dark(white, #011726);
  --fg: light-dark(#334, #dfe2e3);
  --accent1: light-dark(#08f, #38d);
  --accent2: light-dark(#f25, #b35);
  --gray1: light-dark(#223, #889);
  --gray2: light-dark(#667, #ccd);
  --accent-gradient: linear-gradient(45deg, var(--accent1), var(--accent2) 33%, var(--bg-alt) 60%);
  --accent1-gradient: linear-gradient(45deg, var(--gray1), var(--accent1) 30%, white 60%);
  --accent2-gradient: linear-gradient(45deg, var(--gray1), var(--accent2) 30%, white 60%);
  --gray-gradient: linear-gradient(45deg, var(--gray1), var(--gray2) 30%, white 60%);
  --accent1-gradient-vertical: linear-gradient(180deg, var(--accent1), transparent 100%);
  --accent-gradient-vertical: linear-gradient(0, var(--accent1), var(--accent2) 100%);
  --accent-gradient-vertical-reverse: linear-gradient(180deg, var(--accent1), var(--accent2) 100%);
}

@font-face {
  font-family: "Inter";
  src: local("Inter Thin"), local("Inter-Thin"), url("./font/Inter-Thin.ttf");
  font-weight: 100;
}
@font-face {
  font-family: "Inter";
  src: local("Inter ExtraLight"), local("Inter-ExtraLight"), url("./font/Inter-ExtraLight.ttf");
  font-weight: 200;
}
@font-face {
  font-family: "Inter";
  src: local("Inter Light"), local("Inter-Light"), url("./font/Inter-Light.ttf");
  font-weight: 300;
}
@font-face {
  font-family: "Inter";
  src: local("Inter Regular"), local("Inter-Regular"), url("./font/Inter-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: "Inter";
  src: local("Inter Medium"), local("Inter-Medium"), url("./font/Inter-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: "Inter";
  src: local("Inter SemiBold"), local("Inter-SemiBold"), url("./font/Inter-SemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: "Inter";
  src: local("Inter Bold"), local("Inter-Bold"), url("./font/Inter-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: "Inter";
  src: local("Inter ExtraBold"), local("Inter-ExtraBold"), url("./font/Inter-ExtraBold.ttf");
  font-weight: 800;
}
@font-face {
  font-family: "Inter";
  src: local("Inter Black"), local("Inter-Black"), url("./font/Inter-Black.ttf");
  font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

@keyframes pulse {
  0%, 25%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* base styles */
html {
  font-family: Inter, system-ui, sans-serif;
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    linear-gradient(95deg, transparent 0%, var(--bg) 25%, var(--bg) 75%, transparent 100%),
    url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="black" style="opacity:.2"><path d="M19 2h-14a3 3 0 0 0 -3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3 -3v-14a3 3 0 0 0 -3 -3z" /></svg>');
  min-height: 100vh;
}

body {
  margin: 1rem auto;
  padding: 0 1rem;
  width: 100%;
  max-width: 1024px;
  font-size: 18px;
  line-height: 1.5;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  letter-spacing: .025em;
}

a {
  color: var(--accent1);
  text-decoration-line: none;
  text-underline-offset: 1px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
a:hover {
  color: color-mix(in srgb, var(--accent1) 80%, white);
  text-decoration-line: underline;
  text-underline-offset: 3px;
}

p {
  margin: 0;
}

ul {
  list-style: none;
}
ul > li {
  padding-inline-start: 1ch;
}
ul > li::marker {
  content: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23b35" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 12l8 -4.5" /><path d="M12 12v9" /><path d="M12 12l-8 -4.5" /><path d="M12 12l8 4.5" /><path d="M12 3v9" /><path d="M12 12l-8 4.5" /></svg>');
}

/* special utilities */
.text-featured {
  background-clip: text;
  background-image: var(--accent-gradient);
  background-position: 0%;
  background-size: 400%;
  color: transparent;
}
.text-emphasized {
  background-clip: text;
  background-image: var(--gray-gradient);
  background-position: 0%;
  background-size: 400%;
  color: transparent;
}

.content-box {
  border: 1px solid color-mix(in srgb, var(--accent1) 20%, var(--bg-alt));
  background-color: var(--bg-alt);
  border-radius: .375rem;
}

.nav-box,
.click-box {
  list-style: none;
  display: flex;
  padding: 2px;
  background-size: 400%;
  border-radius: .375rem;
  background-position: 100%;
  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-box > label,
.click-box > a {
  line-height: 1.4;
  border-radius: 4px;
  color: var(--fg);
  background-color: var(--bg-alt);
  opacity: 0.8;
  cursor: pointer;
}
.nav-box:is(:hover, :focus-within),
.nav-box:has(input:checked),
.click-box:is(:hover, :focus-within) {
  background-position: 0;
}
.nav-box:is(:hover, :focus-within) h2,
.nav-box:has(input:checked) h2 {
  color: var(--accent1);
}
.nav-box:is(:hover, :focus-within) h2 > svg,
.nav-box:has(input:checked) h2 > svg,
.click-box:is(:hover, :focus-within) a > svg {
  transform: scale(1.1);
}
.click-box:is(:hover, :focus-within) a > svg.stroke-current {
  stroke: var(--accent2);
}
.click-box:is(:hover, :focus-within) a > svg.fill-current {
  fill: var(--accent2);
}
nav ~ section > div.nav-content {
  opacity: 0;
  height: 0;
  transition:
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
  transform-origin: top center;
  transform: scale(0.9);
  overflow: hidden;
}
nav:has(.nav-box:nth-child(1) input:checked) ~ section > div:nth-child(1),
nav:has(.nav-box:nth-child(2) input:checked) ~ section > div:nth-child(2),
nav:has(.nav-box:nth-child(3) input:checked) ~ section > div:nth-child(3),
nav:has(.nav-box:nth-child(4) input:checked) ~ section > div:nth-child(4) {
  opacity: 100;
  height: auto;
  transform: scale(1);
  overflow: initial;
}

.tag {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  border-radius: 0.125rem;
  background-image: var(--gray-gradient);
  background-position: 0%;
  background-size: 400%;
  color: var(--bg);
  padding: 0.125rem .25rem;
}

.border-accent1 {
  border: var(--accent1);
}
.border-accent2 {
  border: var(--accent2);
}
.border-gray2 {
  border: var(--gray2);
}
.stroke-accent1 {
  stroke: var(--accent1);
}
.stroke-accent2 {
  stroke: var(--accent2);
}
.stroke-gray2 {
  stroke: var(--gray2);
}
.bg-accent1,
.before\:bg-accent1::before {
  background: var(--accent1);
}
.bg-accent-gradient {
  background-image: var(--accent-gradient);
}

.before\:vertical-line::before {
  content: "";
  position: absolute;
  height: calc(100% - 2.5rem);
  width: 2px;
  top: 4.25rem;
  left: calc(2rem - 1px);
  z-index: 0;
}
.before\:bg-accent1-gradient-vertical::before {
  background-image: var(--accent1-gradient-vertical);
}
.before\:bg-accent-gradient-vertical::before {
  background-image: var(--accent-gradient-vertical);
}
.before\:bg-accent-gradient-vertical-reverse::before {
  background-image: var(--accent-gradient-vertical-reverse);
}

.hover\:bg-increase {
  background-size: auto 100%;
}
.hover\:bg-increase:hover {
  background-size: auto 120%;
}

/* tw utilities */
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-black {
  font-weight: 900;
}
.linecap-round {
  stroke-linecap: round;
}
.stroke-current {
  stroke: currentColor;
}
.stroke-1\.75 {
  stroke-width: 1.75;
}
.stroke-2 {
  stroke-width: 2;
}
.stroke-3 {
  stroke-width: 3;
}
.stroke-8 {
  stroke-width: 8;
}
.fill-none {
  fill: none;
}
.fill-current {
  fill: currentColor;
}
.animate-blink {
  animation: pulse 1s linear infinite;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.inline-block {
  display: inline-block;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.grid-cols-1 {
  grid-template-columns: minmax(0, 1fr);
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-2\(1\:2\) {
  grid-template-columns: 1fr 2fr;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.justify-start {
  justify-content: start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-self-end {
  justify-self: end;
}
.justify-self-center {
  justify-self: center;
}
.self-center {
  align-self: center;
}
.items-start {
  align-items: start;
}
.items-center {
  align-items: center;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-text-top {
  vertical-align: text-top;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.text-current {
  color: currentColor;
}
.text-gray {
  color: var(--gray1);
}
.uppercase {
  text-transform: uppercase;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.w-16 {
  width: 4rem;
}
.w-full {
  width: 100%;
}
.before\:h-1\/2::before,
.h-1\/2 {
  height: 50%;
}
.before\:h-16::before,
.h-16 {
  height: 4rem;
}
.h-32 {
  height: 8rem;
}
.gap-1 {
  gap: .25rem;
}
.gap-2 {
  gap: .5rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.m-0 {
  margin: 0;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem
}
.my-20 {
  margin-top: 5rem;
  margin-bottom: 5rem
}
.mb-2 {
  margin-bottom: .5rem
}
.mb-4 {
  margin-bottom: 1rem
}
.mb-8 {
  margin-bottom: 2rem
}
.mt-1 {
  margin-top: .25rem
}
.mt-4 {
  margin-top: 1rem
}
.mt-8 {
  margin-top: 2rem
}
.ml-2 {
  margin-left: .5rem
}
.p-0 {
  padding: 0;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded {
  border-radius: .25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.\!rounded-full {
  border-radius: 9999px !important;
}
.\!no-underline {
  text-decoration-line: none !important;
}
.bg-cover {
  background-size: cover;
}
.bg-center {
  background-position: center;
}
.shadow {
  box-shadow:
    0 4px 6px -1px light-dark(#00000020, #00000080),
    0 2px 4px -2px light-dark(#00000020, #00000080);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-solid {
  border-style: solid;
}
.relative {
  position: relative;
}
.z-1 {
  z-index: 1;
}
.opacity-0 {
  opacity: 0;
}
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 500ms ease-in forwards;
}
.animation-delay-150 {
  animation-delay: 150ms;
}
.animation-delay-300 {
  animation-delay: 300ms;
}
.animation-delay-450 {
  animation-delay: 450ms;
}
.animation-delay-600 {
  animation-delay: 600ms;
}

/* responsive utilities */
@media (min-width: 1024px) {
  .lg\:my-12 {
    margin-top: 3rem;
    margin-bottom: 3rem
  }
  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  .lg\:size-16 {
    width: 4rem;
    height: 4rem;
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
