:root {
  color-scheme: light dark;
  /* prmitives */
  --base-white: hsla(0, 0%, 100%, 1);
  --base-black: hsla(0, 0%, 0%, 1);
  --slate-950: hsla(229, 84%, 5%, 1);
  --gray-50: hsla(210, 20%, 98%, 1);
  --gray-200: hsla(220, 13%, 91%, 1);
  --gray-400: hsla(218, 11%, 65%, 1);
  --gray-700: hsla(217, 19%, 27%, 1);
  --gray-800: hsla(215, 28%, 17%, 1);
  --gray-900: hsla(221, 39%, 11%, 1);
  --gray-950: hsla(224, 71%, 4%, 1);
  --neutral-50: hsla(0, 0%, 98%, 1);
  --neutral-100: hsla(0, 0%, 96%, 1);
  --neutral-200: hsla(0, 0%, 90%, 1);
  --neutral-500: hsla(0, 0%, 45%, 1);
  --neutral-700: hsla(0, 0%, 25%, 1);
  --neutral-950: hsla(0, 0%, 4%, 1);
  --red-200: hsla(0, 96%, 89%, 1);
  --red-500: hsla(0, 84%, 60%, 1);
  --red-800: hsla(0, 70%, 35%, 1);
  --green-200: hsla(141, 79%, 85%, 1);
  --green-500: hsla(142, 71%, 45%, 1);
  --green-800: hsla(143, 64%, 24%, 1);
  --green-950: hsla(145, 80%, 10%, 1);
  --orange-200: hsla(32, 98%, 83%, 1);
  --orange-500: hsla(25, 95%, 53%, 1);
  --orange-800: hsla(15, 79%, 34%, 1);
  --cyan-400: hsla(188, 86%, 53%, 1);
  --stone-50: hsla(60, 9%, 98%, 1);
  /* tokens */
  --background: light-dark(var(--base-white), var(--base-black));
  --foreground: light-dark(var(--slate-950), var(--gray-50));
  --muted: light-dark(var(--neutral-100), var(--gray-800));
  --muted-foreground: light-dark(var(--neutral-500), var(--gray-400));
  --card: light-dark(var(--base-white), var(--gray-950));
  --card-foreground: light-dark(var(--neutral-950), var(--gray-50));
  --popover: light-dark(var(--base-white), var(--gray-950));
  --popover-foreground: light-dark(var(--neutral-950), var(--gray-50));
  --border: light-dark(var(--neutral-200), var(--gray-700));
  --input: light-dark(var(--neutral-200), var(--gray-700));
  --primary: light-dark(var(--slate-950), var(--cyan-400));
  --primary-90: light-dark(hsla(222, 47%, 11%, 0.9), hsla(188, 86%, 53%, 0.9));
  --primary-foreground: light-dark(var(--neutral-50), var(--gray-950));
  --secondary: light-dark(var(--neutral-100), var(--gray-800));
  --secondary-80: light-dark(hsla(210, 40%, 96%, 0.8), hsla(215, 28%, 17%, 0.8));
  --secondary-foreground: light-dark(var(--neutral-950), var(--gray-50));
  --accent: light-dark(var(--neutral-100), var(--gray-800));
  --accent-foreground: light-dark(var(--neutral-950), var(--gray-50));
  --destructive: var(--red-500);
  --destructive-90: hsla(0, 84%, 60%, 0.9);
  --destructive-foreground: var(--neutral-50);
  --destructive-muted: var(--red-200);
  --destructive-muted-foreground: var(--red-800);
  --success: var(--green-500);
  --success-90: hsla(142, 71%, 45%, 0.9);
  --success-foreground: var(--green-950);
  --success-muted: var(--green-200);
  --success-muted-90: hsla(141, 79%, 85%, 0.9);
  --success-muted-foreground: var(--green-800);
  --alert: var(--orange-500);
  --alert-90: hsla(25, 95%, 53%, 0.9);
  --alert-foreground: var(--neutral-950);
  --alert-muted: var(--orange-200);
  --alert-muted-90: hsla(32, 98%, 83%, 0.9);
  --alert-muted-foreground: var(--orange-800);
  --ring: var(--cyan-400);
  --surface: light-dark(var(--stone-50), var(--gray-900));
  --radius: 8px;
  --radius-lg: 8px;
  --radius-md: 6px;
  --radius-sm: 4px;
  --font: 'Hyperlegible Sans';
  /* sidebar */
  --sidebar-background: light-dark(var(--stone-50), var(--slate-950));
  --sidebar-foreground: light-dark(var(--neutral-700), var(--base-white));
  --sidebar-primary: light-dark(var(--slate-950), var(--gray-950));
  --sidebar-primary-foreground: light-dark(var(--base-white), var(--cyan-400));
  --sidebar-accent: light-dark(var(--neutral-100), var(--gray-800));
  --sidebar-accent-foreground: light-dark(var(--slate-950), var(--base-white));
  --sidebar-border: light-dark(var(--gray-200), var(--gray-800));
  --sidebar-ring: var(--cyan-400);
  /* spacing */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-none: 0;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-7xl: 64px;
  --px-2: 0.5rem;
  --px-3: 0.75rem;
  --px-4: 1rem;
  --py-1: 0.25rem;
  --py-1-5: 0.375rem;
  --py-2: 0.5rem;
  --py-3: 0.75rem;
  --py-4: 1rem;
  /* helpers */
  --font-code: 'Menlo';
  --font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --layout-columns: 1fr;
  --layout-margin: var(--spacing-3xl);
  --content-margin: var(--spacing-3xl);
}

@media (min-width: 768px) {
  :root {
    --layout-columns: 15rem 1fr;
  }
}

.layout {
  display: grid;
  padding: 0;
  gap: var(--spacing-xl);
  grid-template-columns: var(--layout-columns);
  align-items: start;
  max-width: 1080px;
  margin: auto;
}

.nav {
  color: var(--sidebar-foreground);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  z-index: 1;
  top: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-xl);
  gap: var(--spacing-xl);
  align-self: stretch;
  --flow-spacing: var(--spacing-md);
  --link-padding: var(--py-2) var(--px-3);
  --link-height: 2.5rem;
  --row-gap: 0;
}

.nav .dropdown {
  flex-basis: 15rem;
}

.overlay {
  display: none;
}

#menu {
  margin: 0 0 0 auto;
  height: 100%;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  max-height: none;
}

#menu::backdrop {
  opacity: 0.85;
  background: var(--base-black);
  backdrop-filter: blur(2px);
}

.menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-3xl);
  width: 20rem;
  background: var(--sidebar-background);
  box-shadow: -4px 0 16px 0 rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  max-width: 100%;
  height: 100%;
}

.main {
  padding: 0 var(--spacing-xl) var(--spacing-xl);
}

@media (min-width: 768px) {
  .layout {
    padding: var(--layout-margin);
    gap: var(--layout-margin);

    display: grid;
    padding: var(--layout-margin);
    gap: var(--layout-margin);
    grid-template-columns: var(--layout-columns);
    align-items: start;
    max-width: 1080px;
    margin: auto;
  }

  .nav {
    background: var(--surface);
    border: none;
    top: var(--layout-margin);
    height: calc(100vh - (2 * var(--layout-margin)));
    padding: 0;
    flex-direction: column;
    align-items: normal;
  }

  .nav .dropdown {
    flex-basis: 0;
  }

  button[commandfor="menu"] {
    display: none;
  }

  #menu {
    display: contents;
  }

  .menu {
    flex-grow: 1;
    padding: 0;
    width: auto;
    background: none;
    box-shadow: none;
  }

  .main {
    padding: 0;
  }
}

/*
*  FONT DEFINITION
*/

@font-face {
  font-family: 'Hyperlegible Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/HyperlegibleSans-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'Hyperlegible Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/HyperlegibleSans-Italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Hyperlegible Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/HyperlegibleSans-MediumItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Hyperlegible Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/HyperlegibleSans-Medium.woff2) format('woff2');
}

@font-face {
  font-family: 'Hyperlegible Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(/HyperlegibleSans-BoldItalic.woff2) format('woff2');
}

@font-face {
  font-family: 'Hyperlegible Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/HyperlegibleSans-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Menlo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/Menlo-Regular.ttf) format('truetype');
}

/*
*  GLOBAL
*/

html {
  height: 100%;
}

body {
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  margin: 0;
  padding: 0;
}

h1,
.display-xl {
  font-size: 3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 3rem;
  letter-spacing: -0.036rem;
}

h1 {
  margin-block: var(--h1-margin, 2.5rem);
}

h2,
.display-lg {
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.25rem;
  letter-spacing: -0.01406rem;
}

h2 {
  margin-block: var(--h2-margin, 2.5rem 1.25rem);
}

h3,
.display-sm {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: -0.009rem;
}

h4,
.display-xs {
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: -0.0075rem;
}

.text-lg {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: -0.00675rem;
}

.text-md {
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0;
}

p,
.text-sm {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 125%;
  letter-spacing: 0;
  /* letter-spacing: -0.00525rem; */
}

.text-xs {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1rem;
  letter-spacing: -0.0045rem;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.semi-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-ellipsis {
  flex: 1 1 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a {
  color: var(--foreground);
}

.no-decoration {
  text-decoration: none;
}

hr {
  border: none;
  border-bottom: 1px solid var(--border);
  margin: var(--hr-margin, 0) 0;
}

summary {
  cursor: pointer;
}

summary:focus-visible {
  border-radius: var(--radius-md);
  outline: 2px solid var(--muted-foreground);
  outline-offset: 1px;
}

summary :is(h1, h2, h3, h4) {
  display: inline-block;
  margin: 0;
}

details:open summary {
  margin-block-end: var(--flow-spacing, var(--spacing-xl, 1rem));
}


/*
*  COMPOSITION
*/

.flow {
  display: flex;
  flex-direction: column;
  gap: var(--flow-spacing, var(--spacing-xl, 1rem));
}

.flow[data-direction="reverse"] {
  flex-direction: column-reverse;
}

.flow> :is(h1, h2, h3, h4, p) {
  margin-block: 0;
}

.narrow {
  max-width: 480px;
  margin: auto;
  width: 100%;
}

.row {
  display: flex;
  align-items: var(--row-align, normal);
  column-gap: var(--row-gap, var(--spacing-xl));
  row-gap: var(--flow-spacing, var(--spacing-xl, 1rem));
  flex-wrap: var(--row-wrap, initial);
  max-width: 100%;
  min-width: 0;
}

@container (max-width: 480px) {
  .row[data-column="hvga"] {
    flex-direction: column;
  }
}

[data-row-gap="content"] {
  row-gap: var(--content-margin);
}

[data-row-gap="row"] {
  row-gap: var(--row-gap);
}

.even>* {
  flex: 1;
}

.grow {
  flex-grow: 1;
}

.no-shrink {
  flex-shrink: 0;
}

.center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.stretch {
  align-items: stretch;
  justify-content: stretch;
}

.space {
  justify-content: space-between;
}

.start {
  justify-content: start;
}

.end {
  justify-content: end;
}

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

table {
  --cell-padding: var(--py-4) var(--px-4);
  --inner-border: 1px solid var(--border);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
}

table[data-type="tight"] {
  border: none;
  --cell-padding: 0;
  --inner-border: 0.25rem solid transparent;
}

table[data-type="tight"] :is(th+th, td+td) {
  padding-inline-start: 0.25rem;
}

th {
  padding: var(--cell-padding);
  text-align: left;
  color: var(--muted-foreground);
  font-weight: 500;
  border-block-end: var(--inner-border);
}

td {
  padding: var(--cell-padding);
}

tr+tr td {
  border-block-start: var(--inner-border);
}

/*
*  UTILITIES
*/

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

code {
  font-family: var(--font-code);
  font-style: normal;
  font-weight: 700;
}

pre code,
.code-block code {
  font-weight: 400;
}


pre,
.code-block {
  overflow-wrap: anywhere;
  display: block;
  padding: var(--spacing-md) var(--spacing-xl);
  --flow-spacing: var(--spacing-md);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
}

.log {
  white-space: pre;
  background: var(--base-black);
  color: var(--base-white);
  font-family: var(--font-code), monospace;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  margin: 0;
  padding: 1.5rem;
  overflow-x: auto;
}

.display-contents {
  display: contents;
}

fieldset.reset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tighten>*:first-child {
  margin-block-start: 0;
}

.tighten>*:last-child {
  margin-block-end: 0;
}

.margin-mega {
  margin: var(--layout-margin);
  margin-block-start: calc(5 * var(--layout-margin));
}

.color-focus {
  color: var(--ring);
}

.color-muted {
  color: var(--muted-foreground);
}

/*
*  BLOCK / EXCEPTIONS
*/

.card {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 6px 6px 0 rgba(148, 163, 184, 0.15), 0 0 1px 0 var(--slate-400, #94A3B8);
  container-type: inline-size;
  overflow: hidden;
  width: 100%;
  container-type: inline-size;
}

.card+* {
  margin-block-start: var(--layout-margin);
}

dialog {
  border-radius: var(--radius, -0.5rem);
  border: 1px solid var(--border);
  padding: var(--spacing-3xl);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  max-width: 480px;
  --h2-margin: 0;
  --h2-weight: 700;
}

dialog h2 {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.75rem;
  letter-spacing: -0.00675rem;
}

.header {
  margin-block: var(--content-margin, 1.5rem);
  padding-inline: var(--content-margin, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xl);
  --row-align: center;
  --h1-margin: 0;
  --h2-margin: 0;
}

.header>* {
  flex: 0 1 100%;
}

.header h1,
.header h2,
.breadcrumbs {
  flex: 0 1 100%;
  color: var(--foreground);
  font-family: var(--font-family);
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0075rem;
}

.header .wide-only {
  display: none;
}

@container (width > 30rem) {
  .header {
    flex-wrap: initial;
  }

  .header>* {
    flex: initial;
  }

  .header h1,
  .header h2,
  .breadcrumbs {
    flex: 1 0 max-content;
  }

  .header .wide-only {
    display: initial;
  }
}


.breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--muted-foreground);
}

.breadcrumbs,
.breadcrumbs li:not([aria-current]) {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.breadcrumbs li:not([aria-current])::after {
  content: "";
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  mask-image: url("/icons/caret-right.svg");
  mask-size: 1rem;
  mask-repeat: no-repeat;
  mask-position: center;
}

.breadcrumbs li[aria-current] {
  color: var(--foreground);
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.content {
  margin: var(--content-margin, 1.5rem);
}

.content>*:first-child {
  margin-block-start: 0;
}

.content>*:last-child {
  margin-block-end: 0;
}

:is(button, .button) {
  --height: 2.5rem;
  margin: var(--button-margin, 0);
  color: var(--primary-foreground);
  background: var(--primary);
  border-radius: var(--radius-md);
  padding: var(--py-2) var(--px-4);
  min-height: var(--height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  line-height: 1.25;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

:is(button, .button) svg {
  color: inherit;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

:is(button, .button):not(:disabled, a:not([href])):hover {
  background: var(--primary-90);
}

:is(button, .button):disabled,
a.button:not([href]) {
  cursor: initial;
  opacity: 0.5;
}

:is(button, .button)[icon-only] {
  width: var(--height);
  height: var(--height);
}

:is(button, .button)[data-size="sm"] {
  --height: 2.25rem;
}

:is(button, .button):focus-visible {
  outline: 2px solid var(--muted-foreground);
  outline-offset: 1px;
}

:is(button, .button)[data-type="secondary"] {
  color: var(--secondary-foreground);
  background: var(--secondary);
}

:is(button, .button)[data-type="secondary"]:not(:disabled, a:not([href])):hover {
  background: var(--secondary-80)
}

:is(button, .button)[data-type="outline"] {
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
}

:is(button, .button)[data-type="outline"]:not(:disabled, a:not([href])):hover {
  background: var(--accent);
}

:is(button, .button)[data-type="ghost"] {
  background: transparent;
  color: var(--foreground);
}

:is(button, .button)[data-type="ghost"]:not(:disabled, a:not([href])):hover {
  background: var(--accent)
}

:is(button, .button)[data-type="error"] {
  background: var(--destructive);
  color: var(--base-white);
}

:is(button, .button)[data-type="error"]:not(:disabled, a:not([href])):hover {
  background: var(--destructive-90);
}

:is(button, .button)[data-type="sidebar"] {
  display: flex;
  justify-content: flex-start;
  padding-inline: var(--px-3);
  background: transparent;
  color: var(--sidebar-foreground);
}

:is(button, .button)[data-type="sidebar"]:not([aria-current]):hover {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

:is(button, .button)[data-type="sidebar"][aria-current] {
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}

:is(button, .button)[data-type="sidebar"][aria-current]:hover {
  background: var(--sidebar-primary);
  color: var(--sidebar-primary-foreground);
}

.dropdown>button {
  display: flex;
  width: calc(100% + 2 * var(--spacing-md));
  margin-inline: calc(-1 * var(--spacing-md));
  padding: var(--spacing-md);
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  background: transparent;
  color: var(--sidebar-foreground);
  height: unset;
  min-height: unset;
  text-align: left;
  border-radius: var(--radius-md);
}

.dropdown>button:not(:disabled):hover {
  background: var(--sidebar-accent);
}

.dropdown>button div {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown aside {
  position: absolute;
  box-sizing: border-box;
  top: calc(var(--spacing-md) + 3.25rem + var(--spacing-xs));
  left: var(--spacing-xl);
  max-width: 20rem;
  margin: 0;
  padding: 0.25rem;
  background: var(--background);
  color: var(--sidebar-foreground);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.00525rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--sidebar-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
}

@media (min-width: 768px) {
  .dropdown aside {
    top: calc(var(--layout-margin) + 3.25rem + var(--spacing-xs));
    left: var(--layout-margin);
    right: auto;
    width: calc(15rem - var(--spacing-md));
  }
}

.card:has(.dropdown) {
  overflow: unset;
}

@supports (anchor-name: --a) {
  .dropdown>button {
    anchor-name: --dropdown-button;
  }

  .dropdown aside {
    position-anchor: --dropdown-button;
    top: anchor(bottom);
    left: calc(anchor(left) + var(--spacing-md));
    width: calc(anchor-size(width) - 2 * var(--spacing-md));
    margin-top: var(--spacing-xs);
  }
}

.dropdown aside header {
  margin: 0.5rem;
  opacity: 0.7;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: -0.0045rem;
}

.dropdown aside ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.dropdown aside :is(a, button) {
  color: var(--sidebar-foreground);
  box-sizing: border-box;
  display: flex;
  height: 2.5rem;
  padding: 0.5rem;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  text-decoration: none;
  border-radius: var(--radius-md);
  width: 100%;
  background: none;
  justify-content: flex-start;
}

.dropdown aside :is(a, button):not(:disabled, a:not([href])):hover {
  background: var(--sidebar-accent);
}

.dropdown aside svg {
  box-sizing: border-box;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.125rem 0;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--sidebar-border);
  color: var(--sidebar-foreground);
}

.dropdown aside hr {
  margin: 0.5rem -0.25rem;
}

.dropdown aside>a span {
  opacity: 0.7;
  font-weight: 500;
}

.alert {
  display: grid;
  padding: 1rem 0.5rem 1rem 1rem;
  align-items: flex-start;
  gap: var(--spacing-xs) var(--spacing-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
}

.alert strong {
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem;
}

.alert svg {
  margin-block-start: 0.25rem;
}

.alert:has(svg) {
  grid-template-columns: min-content auto;
}

.alert:has(svg)>svg {
  grid-column: 1;
}

.alert:has(svg)>* {
  grid-column: 2;
}

.alert[data-type="error"] {
  border-color: var(--destructive);
  color: var(--destructive);
}

.alert[data-type="info"] {
  border-color: var(--primary);
  color: var(--primary);
}

.alert[data-type="success"] {
  border-color: var(--success);
  color: var(--success);
}

.alert[data-type="warning"] {
  border-color: var(--alert);
  color: var(--alert);
}

.item {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  padding: var(--spacing-xl);
  --row-gap: var(--spacing-sm);
  --row-wrap: wrap;
  gap: var(--row-gap);
  align-self: stretch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-sizing: border-box;
  text-decoration: none;
}

.item::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  mask-image: url("/icons/caret-right.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
}

.item>:last-child {
  grid-column: 2;
}

@container (min-width: 30rem) {
  .item {
    display: flex;
    height: 4.25rem;
    --row-gap: var(--spacing-md);
    --row-wrap: initial;
  }
}

.pagination {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  color: var(--foreground);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -0.00525rem;
}

.pagination a {
  display: flex;
  padding: 0.625rem;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  min-width: 2.5rem;
  height: 2.5rem;
  box-sizing: border-box;
}

.pagination a[aria-current] {
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--background);
}

.pagination svg {
  display: block;
}

.avatar,
button .avatar {
  box-sizing: border-box;
  padding: var(--py-1-5);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}

.badge {
  padding: 0.125rem 0.625rem;
  border-radius: 10rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-style: normal;
}

.badge[data-type="secondary"] {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.badge[data-type="error"] {
  background: var(--destructive-muted);
  color: var(--destructive-muted-foreground);
}

.badge[data-type="outline"] {
  background: transparent;
  color: inherit;
  border: 1px solid var(--border);
}

.badge[data-type="success"] {
  background: var(--success-muted);
  color: var(--success-muted-foreground);
}

.badge[data-type="alert"] {
  background: var(--alert-muted);
  color: var(--alert-muted-foreground);
}

label,
.radios legend {
  color: var(--foreground);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: -0.00525rem;
  padding: 0;
  margin: 0;
}

input::placeholder {
  color: var(--muted-foreground);
}

input[type="radio"] {
  appearance: none;
  margin: 0;
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 3px solid var(--background);
  outline: 1px solid var(--foreground);
  outline-offset: -1px;
}

input[type="radio"]:checked {
  background: var(--foreground);
}

input[type="radio"]:focus-visible {
  outline-color: currentColor;
  box-shadow: 0 0 0 3px var(--muted-foreground);
}

input[type="checkbox"] {
  accent-color: var(--foreground);
  margin: 0;
  width: 1rem;
  height: 1rem;
}

select {
  height: 2.5rem;
  padding: var(--spacing-md) var(--spacing-lg);
  align-self: stretch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--background);
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

.input {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-width: 70ch;
}

.input>div {
  display: flex;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: var(--spacing-xs) var(--spacing-lg);
  gap: var(--spacing-lg);
  align-items: center;
  align-self: stretch;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  font-weight: 500;
  letter-spacing: -0.00525rem;
}

.input>div:focus-within {
  outline: 3px solid var(--muted-foreground);
  outline-offset: 1px;
}

.input>div svg {
  flex-shrink: 0;
  pointer-events: none;
  color: var(--foreground);
  height: 1rem;
  width: 1rem;
}

.input>div :is(input, textarea) {
  border: none;
  outline: none;
  flex: 1;
  width: 20ch;
  padding: 0.25rem;
  background: transparent;
  color: var(--foreground);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
  resize: vertical;
}

:is(label, .input, .radios) small {
  color: var(--muted-foreground);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.25rem;
}

.input small[role="alert"] {
  display: none;
  color: var(--destructive);
}

.input:has(:invalid) small[role="alert"] {
  display: block;
}

.input:has(:required:placeholder-shown) small[role="alert"] {
  display: none;
}

.input:has(:disabled) {
  opacity: 0.5;
}

.radios {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.radios legend {
  display: inline-block;
  margin-block-end: var(--spacing-sm);
}

.radios label+label {
  margin-block-start: var(--spacing-xs);
}

.radios small {
  display: inline-block;
  margin-block-start: var(--spacing-sm);
}

label:has(input) {
  width: fit-content;
  display: grid;
  grid-template-columns: min-content auto;
  align-items: center;
  gap: var(--spacing-xxs) var(--spacing-md);
}

label input {
  grid-column: 1;
}

label * {
  grid-column: 2;
}

form:has(input[name="scheme"]) :is(.https, .https-auth, .ssh) {
  display: none;
}

form:has(input[name="scheme"][value="https"]:checked) .https {
  display: flex;
}

form:has(input[name="https_auth"]:checked) .https-auth {
  display: flex;
}

form:has(input[name="scheme"][value="ssh"]:checked) .ssh {
  display: flex;
}

.ssg-picker ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--spacing-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssg-picker label {
  box-sizing: border-box;
  height: 80px;
  width: 100%;
  padding: var(--spacing-md);
}

.ssg-picker label:has(:checked) {
  outline: 2px solid var(--muted-foreground);
  outline-offset: 1px;
  background: var(--accent);
}

.ssg-picker img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  display: block;
}

.ssg-picker input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

[data-ssg] {
  display: none;
}

.ssg-picker:has([name="ssg"][value="hugo"]:checked)~[data-ssg="hugo"],
.ssg-picker:has([name="ssg"][value="jekyll"]:checked)~[data-ssg="jekyll"],
.ssg-picker:has([name="ssg"][value="astro"]:checked)~[data-ssg="astro"],
.ssg-picker:has([name="ssg"][value="gatsby"]:checked)~[data-ssg="gatsby"],
.ssg-picker:has([name="ssg"][value="nextjs"]:checked)~[data-ssg="nextjs"],
.ssg-picker:has([name="ssg"][value="nuxt"]:checked)~[data-ssg="nuxt"],
.ssg-picker:has([name="ssg"][value="zola"]:checked)~[data-ssg="zola"],
.ssg-picker:has([name="ssg"][value="node"]:checked)~[data-ssg="node"],
.ssg-picker:has([name="ssg"][value="container"]:checked)~[data-ssg="container"],
.ssg-picker:has([name="ssg"][value="static"]:checked)~[data-ssg="static"] {
  display: flex;
}