@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/Geist-VariableFont_wght.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after {
  box-sizing: border-box;
}

*:not(dialog) {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  font-family: Geist, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

:root {
  --fd-layout-width: 100vw;
  --radius: .625rem;
  --progress-color: #000;
  --nav-height: 61px;
  --header-height: 64px;
  --promo-bar-height: 64px;
  --header-z-index: 20;
  --letter-spacing: 0em;
  --spacing: .23rem;
  --shadow-color: oklch(30% .0891 19.6);
  --shadow-opacity: .08;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-offset-x: 0;
  --shadow-offset-y: 1px;
  --background: oklch(100% 0 0);
  --foreground: oklch(14.1% .005 285.823);
  --primary: oklch(21% .006 285.885);
  --primary-foreground: oklch(98.5% 0 0);
  --secondary: oklch(96.7% .001 286.375);
  --secondary-foreground: oklch(21% .006 285.885);
  --muted: oklch(96.7% .001 286.375);
  --muted-foreground: oklch(55.2% .016 285.938);
  --accent: oklch(96.7% .001 286.375);
  --accent-foreground: oklch(21% .006 285.885);
  --destructive: oklch(57.7% .245 27.325);
  --border: oklch(92% .004 286.32);
  --input: oklch(92% .004 286.32);
  --ring: oklch(70.5% .015 286.067);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(14.1% .005 285.823);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(14.1% .005 285.823);
  --sidebar: oklch(98.5% 0 0);
  --sidebar-foreground: oklch(14.1% .005 285.823);
  --sidebar-primary: oklch(21% .006 285.885);
  --sidebar-primary-foreground: oklch(98.5% 0 0);
  --sidebar-accent: oklch(96.7% .001 286.375);
  --sidebar-accent-foreground: oklch(21% .006 285.885);
  --sidebar-border: oklch(92% .004 286.32);
  --sidebar-ring: oklch(70.5% .015 286.067);
  --chart-1: oklch(64.6% .222 41.116);
  --chart-2: oklch(60% .118 184.704);
  --chart-3: oklch(39.8% .07 227.392);
  --chart-4: oklch(82.8% .189 84.429);
  --chart-5: oklch(76.9% .188 70.08);
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --transparent: transparent;
  --blue-300: oklch(70% .17 235);
  --blue-400: oklch(65.8% .192 235);
  --blue-500: oklch(61.6% .208 235);
  --indigo-300: oklch(70.7% .14 270);
  --violet-200: oklch(82.6% .099 285);
  --color-fd-background: var(--background);
  --color-fd-primary: var(--primary);
  --color-fd-border: var(--border);
  --color-fd-accent: var(--accent);
  --color-fd-accent-foreground: var(--accent-foreground);
  --color-fd-muted: var(--muted);
  --color-fd-muted-foreground: var(--muted-foreground);
  --color-fd-foreground: var(--foreground);
  --color-fd-secondary: var(--secondary);
  --color-fd-secondary-foreground: var(--secondary-foreground);
  --color-fd-card: var(--card);
  --color-fd-card-foreground: var(--card-foreground);
  --color-fd-popover-foreground: var(--popover-foreground);
  --color-fd-popover: var(--popover);
  --color-fd-primary-foreground: var(--primary-foreground);
  --color-fd-ring: var(--ring);
  --ea-bgcolor: var(--secondary);
  --ea-bgcolor-dark: var(--secondary);
  --ea-color-domain: var(--muted-foreground);
  --ea-color-domain-dark: var(--muted-foreground);
  --ea-color-link: var(--foreground);
  --ea-color-link-active: var(--primary);
  --ea-color-link-bold: var(--primary);
  --ea-color-link-bold-dark: var(--primary);
  --ea-color-link-callout: var(--muted-foreground);
  --ea-color-link-callout-active: var(--foreground);
  --ea-color-link-callout-dark: var(--muted-foreground);
  --ea-color-link-callout-dark-active: var(--foreground);
  --ea-color-link-dark: var(--foreground);
  --ea-color-link-dark-active: var(--primary);
  --ea-stylefixed-bgcolor: var(--secondary);
  --ea-stylefixed-bgcolor-dark: var(--secondary);
  --ea-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --ea-font-size: 14px;
  --ea-image-placement-width: 180px;
  --ea-image-placement-width-horizontal: 320px;
  --ea-image-width: 120px;
  --ea-image-width-xs: 44px;
  --ea-container-lg: 960px;
  --ea-container-md: 720px;
  --ea-container-xl: 1040px;
  --ea-fixedheader-height: 50px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fd-layout-width: 100vw;
    --progress-color: #fff;
    --background: oklch(14.1% .005 285.823);
    --foreground: oklch(98.5% 0 0);
    --primary: oklch(92% .004 286.32);
    --primary-foreground: oklch(21% .006 285.885);
    --secondary: oklch(27.4% .006 286.033);
    --secondary-foreground: oklch(98.5% 0 0);
    --muted: oklch(27.4% .006 286.033);
    --muted-foreground: oklch(70.5% .015 286.067);
    --accent: oklch(27.4% .006 286.033);
    --accent-foreground: oklch(98.5% 0 0);
    --destructive: oklch(70.4% .191 22.216);
    --border: oklch(100% 0 0/.1);
    --input: oklch(100% 0 0/.15);
    --ring: oklch(55.2% .016 285.938);
    --card: oklch(21% .006 285.885);
    --card-foreground: oklch(98.5% 0 0);
    --popover: oklch(21% .006 285.885);
    --popover-foreground: oklch(98.5% 0 0);
    --sidebar: oklch(21% .006 285.885);
    --sidebar-foreground: oklch(98.5% 0 0);
    --sidebar-primary: oklch(48.8% .243 264.376);
    --sidebar-primary-foreground: oklch(98.5% 0 0);
    --sidebar-accent: oklch(27.4% .006 286.033);
    --sidebar-accent-foreground: oklch(98.5% 0 0);
    --sidebar-border: oklch(100% 0 0/.1);
    --sidebar-ring: oklch(55.2% .016 285.938);
    --chart-1: oklch(48.8% .243 264.376);
    --chart-2: oklch(69.6% .17 162.48);
    --chart-3: oklch(76.9% .188 70.08);
    --chart-4: oklch(62.7% .265 303.9);
    --chart-5: oklch(64.5% .246 16.439);
    --ea-bgcolor: var(--secondary);
    --ea-bgcolor-dark: var(--secondary);
    --ea-color-domain: var(--muted-foreground);
    --ea-color-domain-dark: var(--muted-foreground);
    --ea-color-link: var(--foreground);
    --ea-color-link-dark: var(--foreground);
    --ea-color-link-active: var(--primary);
    --ea-color-link-dark-active: var(--primary);
    --ea-color-link-bold: var(--primary);
    --ea-color-link-bold-dark: var(--primary);
    --ea-color-link-callout: var(--muted-foreground);
    --ea-color-link-callout-dark: var(--muted-foreground);
    --ea-color-link-callout-active: var(--foreground);
    --ea-color-link-callout-dark-active: var(--foreground);
    --ea-stylefixed-bgcolor: var(--secondary);
    --ea-stylefixed-bgcolor-dark: var(--secondary);
  }
}



body {
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;

  display: flex;
  flex-direction: column;

  align-items: stretch;

  background: var(--background);
  color: var(--foreground);
}


header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}

header a:has(> h1) {
  color: var(--foreground);
  text-decoration: none;
}

header h1 {
  font-weight: 600;
  font-size: 1.5rem;
}

header nav, header nav ul li {
  display: contents;
}

header nav ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  gap: 1.2rem;
  font-size: 0.9rem;
  font-weight: 400;
  padding-left: 1.2rem;
}

header nav ul a {
  color: var(--color-fd-muted-foreground);
  text-decoration: none;
}

header nav ul a:hover {
  color:  var(--color-fd-accent-foreground);
}


footer {
  margin-top: auto;

  text-align: center;
 
  border-top: 1px solid var(--border);
  background-color: var(--secondary)
}

table {
  font-size: .875rem;
  border-collapse: collapse;
}

table th {
  white-space: nowrap;
  padding: 0.4rem 0.5rem;
  margin: 0;
  text-align: left;
}

table thead {
  font-weight: 500;
}

table tr {
  border-bottom: 1px solid var(--border);
}

table tr td {
  padding: 0.4rem 0.5rem;
}

/* Misc Classes */

main {
  display: contents;
}

.content-width {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flex-max {
  flex: 1;
}

.centered-content {
  align-items: center;
  justify-content: center;
}

.stretch {
  align-items: stretch;
}

button.square {
  padding: 0.3rem;
}

button.square > svg {
  min-width: 1rem;
}

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

.gap-1 {
  gap: 0.5rem;
}

.destructive {
  color: white;
  background: color-mix(in oklab, var(--destructive)60%,transparent);
  border: color-mix(in oklab, var(--destructive)80%,transparent);
}

.destructive:hover {
  color: white;
  background: color-mix(in oklab, var(--destructive)80%,transparent);
  border: color-mix(in oklab, var(--destructive)100%,transparent);
}

.overflow-x {
  overflow-x: scroll;
}

#key-describe {
  white-space: nowrap;
}

#key-describe pre {
  white-space: nowrap;
  display: inline;
}

#gen-new-key {
  position: sticky;
  left: 0;
}

/* Native Components */

button {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 500;

  display: flex;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;

  align-items: center;
  justify-content: center;

  appearance: button;

  background-color: color-mix(in oklab,var(--input)30%,transparent);
  color: var(--foreground);

  cursor: pointer;
}

button > svg {
  height: 1rem;
  aspect-ratio: 1.0;
}

input {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 500;

  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;

  appearance: button;
  outline-color: blue;

  background-color: color-mix(in oklab,var(--input)30%,transparent);
  color: var(--foreground);
}

input:focus {
  outline: 2px solid blue;
}

button:hover {
  background-color: var(--muted);
  color: var(--foreground);
}

form {
  display: contents;
}

dialog {
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--background);
  color: var(--primary);
  font-family: Geist, system-ui, sans-serif;
  padding: 0;
}

dialog::backdrop {
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(4px);
}

.dialog-content {
  padding: 1rem;
}