:root {
  --100dvh: 100dvh;
  --100dvw: 100dvw;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --aspect-video: 16 / 9;
  --background: #fff;
  --banner-height: 48px;
  --border: #0000001a;
  --card: #fff;
  --card-foreground: oklch(.145 0 0);
  --chart-1: oklch(.646 .222 41.116);
  --chart-2: oklch(.6 .118 184.704);
  --chart-3: oklch(.398 .07 227.392);
  --chart-4: oklch(.828 .189 84.429);
  --chart-5: oklch(.769 .188 70.08);
  --color-black: #000;
  --color-border: #0000001a;
  --color-gray-100: oklch(.967 .003 264.542);
  --color-white: #fff;
  --color-yellow-500: oklch(.795 .184 86.047);
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-6xl: 72rem;
  --container-lg: 32rem;
  --container-sm: 24rem;
  --default-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --destructive: #d4183d;
  --destructive-foreground: #fff;
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-size: 14px;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --foreground: oklch(.145 0 0);
  --full-height-with-banner: calc(100dvh - 48px);
  --input: transparent;
  --input-background: #f3f3f5;
  --leading-relaxed: 1.625;
  --leading-tight: 1.25;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --radius: .625rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-xs: .125rem;
  --ring: oklch(.708 0 0);
  --secondary: oklch(.95 .0058 264.53);
  --secondary-foreground: #030213;
  --sidebar: oklch(.985 0 0);
  --sidebar-accent: oklch(.97 0 0);
  --sidebar-accent-foreground: oklch(.205 0 0);
  --sidebar-border: oklch(.922 0 0);
  --sidebar-foreground: oklch(.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(.985 0 0);
  --sidebar-ring: oklch(.708 0 0);
  --spacing: .25rem;
  --switch-background: #cbced4;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-xl: 1.25rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --tracking-tight: -.025em;
  --tracking-widest: .1em;
  --tw-gradient-from: rgb(255, 255, 255);
  --tw-gradient-position: to bottom right in oklab;
  --tw-gradient-stops: to bottom right in oklab, rgb(255, 255, 255) 0%, rgb(236, 236, 240) 100%;
  --tw-gradient-to: rgb(236, 236, 240);
}

body {
  font-family: var(--default-font-family);
}

* {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

h1, h2, p {
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}

.min-h-screen {
  min-height: 100vh;
}

footer {
  background-color: var(--background);
  border-top: 1px solid var(--border);
}

.footer-container {
  padding-block: calc(var(--spacing) * 8);
  padding-inline: calc(var(--spacing) * 6);
  max-width: var(--container-6xl);
  margin-inline: auto;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}

.footer-links {
  display: flex;
  gap: calc(var(--spacing) * 6);
}

.footer-link {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  appearance: button;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  opacity: 1;
  background-color: #0000;
  border-radius: 0;
  text-decoration: none;
}

.footer-link:hover {
  color: var(--foreground);
}

.footer-text {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  text-align: center;
}

.nav-bar {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  z-index: 50;
  top: calc(var(--spacing) * 0);
  position: sticky;
}

.nav-bar-container {
  padding-block: calc(var(--spacing) * 4);
  padding-inline: calc(var(--spacing) * 6);
  max-width: var(--container-6xl);
  margin-inline: auto;
}

.nav-bar-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-brand {
  display: flex;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  gap: calc(var(--spacing) * 3);
  align-items: center;
  text-decoration: none;
}

.nav-brand:hover {
  opacity: 0.8;
}

.nav-brand-logo-container {
  /*background-color: var(--primary);*/
  border-radius: var(--radius);
  justify-content: center;
  align-items: center;
  width: calc(var(--spacing) * 12);
  height: calc(var(--spacing) * 12);
  display: flex;
}

.nav-brand-title {
  color: var(--foreground);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  margin: 0;
  display: block;
}

.nav-brand-subtitle-container {
  display: flex;
  gap: calc(var(--spacing) * 1);
  align-items: center;
}

.nav-brand-subtitle {
  color: var(--muted-foreground);
  display: block;
  margin: 0;
}

.nav-brand-subtitle-apple-logo {
  width: calc(var(--spacing) * 5);
  height: calc(var(--spacing) * 5);
  fill: var(--primary);
}

.img-fill {
  width: 100%;
  height: 100%;
}

