/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/b5cdd4765614e027c252.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/49594fb515ba00213fc3.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/f4df85d151e5ee39bc2b.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/4f908aee8194b11d9c35.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/ab4bb8dcda024fe6eff2.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/8bff79fbfaa8b8167a0b.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/4f2981d82860061bca3e.woff2) format('woff2-variations');
  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;
}
/* jetbrains-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/d539db020336f57425d6.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/37ac7420bb0322435b68.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/37f52feea3c5bd1fd627.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/b8c38c3c8fb199cde7e7.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/d4c248b90e9a0c38ac4c.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/6724bbc0741b07b1d0b2.woff2) format('woff2-variations');
  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;
}
/* material-symbols-rounded-latin-wght-normal */
@font-face {
  font-family: 'Material Symbols Rounded Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url(/02dbf836ddcbf50e254b.woff2) format('woff2-variations');
}
.j6x19y0 {
  grid-area: main;
}


:root {
  --_1mefrpqg: "Inter Variable", "Noto Sans SC", app-sans-serif, system-ui;
  --_1mefrpqh: "JetBrains Mono Variable", "Noto Sans SC", monospace, app-sans-serif, system-ui;
}
:root {
  --_1mefrpq0: light-dark(oklch(100% 0% 0deg / 100%), oklch(20% 0% 0deg / 100%));
  --_1mefrpq1: light-dark(oklch(100% 0% 0deg / 60%), oklch(20% 0% 0deg / 60%));
  --_1mefrpq2: light-dark(oklch(0% 0% 0deg / 20%), oklch(100% 0% 0deg / 20%));
  --_1mefrpq3: light-dark(red, oklch(24% 0% 0deg / 100%));
  --_1mefrpq4: light-dark(oklch(0% 0% 0deg / 100%), oklch(100% 0% 0deg / 100%));
  --_1mefrpq5: light-dark(oklch(32% 0% 0deg / 100%), oklch(72% 0% 0deg / 100%));
  --_1mefrpq6: light-dark(oklch(64% 0% 0deg / 100%), oklch(50% 0% 0deg / 100%));
  --_1mefrpq7: light-dark(oklch(50% 50% 256deg / 100%), oklch(80% 30% 256deg / 100%));
  --_1mefrpq8: light-dark(oklch(80% 60% 24deg / 100%), oklch(80% 60% 24deg / 100%));
  --_1mefrpq9: light-dark(oklch(60% 40% 256deg / 100%), oklch(72% 32% 256deg / 100%));
  --_1mefrpqa: light-dark(oklch(36% 0% 0deg / 100%), oklch(36% 0% 0deg / 100%));
  --_1mefrpqb: light-dark(oklch(100% 0% 0deg / 8%), oklch(100% 0% 0deg / 8%));
  --_1mefrpqc: light-dark(oklch(40% 0% 0deg / 100%), oklch(40% 0% 0deg / 100%));
  --_1mefrpqd: light-dark(oklch(100% 0% 0deg / 8%), oklch(100% 0% 0deg / 8%));
  --_1mefrpqe: light-dark(oklch(44% 0% 0deg / 100%), oklch(44% 0% 0deg / 100%));
  --_1mefrpqf: light-dark(oklch(100% 0% 0deg / 8%), oklch(100% 0% 0deg / 8%));
}
html {
  font-size: 16px;
  text-autospace: normal;
  background: var(--_1mefrpq0);
  color: var(--_1mefrpq4);
}
body {
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}
.markdown {
  font: 400 16px/24px var(--_1mefrpqg);
}
.markdown code {
  font-family: var(--_1mefrpqh);
}
.x1xet30 {
  font-family: "Material Symbols Rounded Variable";
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}
._15durpn0 {
  font: 400 16px/1 var(--_1mefrpqg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 
  'left main'
;
  width: 100dvw;
  height: 100dvh;
}
._15durpn1 {
  grid-area: left;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding-block: 32px;
  padding-inline-start: 32px;
  box-shadow: inset -1px 0 0 0 oklch(100% 0% 0deg / 10%);
  background: var(--_1mefrpq3);
}
._15durpn2 {
  justify-self: end;
  display: grid;
  grid-template-areas: 
  'logo home'
  'logo dashboard'
;
  -moz-column-gap: 6px;
       column-gap: 6px;
  padding-inline-start: 4px;
  padding-inline-end: 32px;
}
._15durpn3 {
  display: flex;
  align-items: center;
  grid-area: logo;
  font-size: 24px;
}
._15durpn4 {
  grid-area: home;
  font: 300 12px/1 var(--_1mefrpqg);
  color: inherit;
  text-decoration: none;
}
._15durpn4:hover {
  text-decoration: underline;
}
._15durpn5 {
  grid-area: dashboard;
  font: 700 17px/24px var(--_1mefrpqg);
  color: inherit;
  text-decoration: none;
}
._15durpn5:hover {
  text-decoration: underline;
}
._15durpn6 {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
._15durpn7 {
  display: flex;
  align-items: center;
  -moz-column-gap: 6px;
       column-gap: 6px;
  padding-inline-start: 12px;
  padding-block: 8px;
  font: 500 16px/1 var(--_1mefrpqg);
  text-decoration: none;
  color: inherit;
}
._15durpn8:hover {
  box-shadow: inset 0 0 0 1px oklch(100% 0% 0deg / 8%);
  background: oklch(100% 0% 0deg / 10%);
  border-radius: 9px 0 0 9px;
}
._15durpn9 {
  box-shadow: inset -1px 0 0 0 var(--_1mefrpq9), inset 0 0 0 1px oklch(100% 0% 0deg / 8%);
  background: oklch(100% 0% 0deg / 10%);
  border-radius: 9px 0 0 9px;
}
._15durpne {
  font-size: 16px;
}
._18tr43d1 {
  font: 400 16px/1 var(--_1mefrpqg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 700px minmax(0, 1fr);
  -moz-column-gap: 24px;
       column-gap: 24px;
  width: 100dvw;
  height: 100dvh;
  overflow-y: auto;
  scrollbar-gutter: stable;
  container-type: scroll-state;
  container-name: _18tr43d0;
}
._18tr43d2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding-block: 12px;
  margin-top: 20px;
  position: sticky;
  top: 0;
  background: var(--_1mefrpq1);
  backdrop-filter: blur(16px);
  z-index: 999;
}
._18tr43d3 {
  justify-self: end;
  display: flex;
  align-items: center;
  font-size: 16px;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
._18tr43d4 {
  font-size: 32px;
  padding-bottom: 6px;
}
._18tr43d5 {
  display: flex;
  align-items: center;
  font: 700 16px/1 var(--_1mefrpqg);
  text-decoration: none;
  color: inherit;
  padding-block: 4px;
}
._18tr43d7 {
  box-shadow: inset 0 -2px 0 0 var(--_1mefrpq9);
}
._18tr43dc {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
._18tr43dd {
  display: flex;
  align-items: center;
  font: 500 16px/1 var(--_1mefrpqg);
  text-decoration: none;
  color: inherit;
  padding-block: 4px;
}
._18tr43df {
  box-shadow: inset 0 -2px 0 0 var(--_1mefrpq9);
}
._18tr43dk {
  display: flex;
  -moz-column-gap: 12px;
       column-gap: 12px;
}
._18tr43dl {
  font-size: 20px;
  color: inherit;
}
._18tr43dm {
  grid-column: 1 / -1;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-areas: 'left main right';
}
._18tr43dn {
  grid-column: 1 / 2;
}
._18tr43do {
  grid-column: 2 / 3;
}
._18tr43dp {
  grid-column: 3 / 4;
}
._18tr43dq {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 4px;
       column-gap: 4px;
  color: var(--_1mefrpq5);
  font: 400 14px/20px var(--_1mefrpqg);
  padding-block: 32px;
}
._18tr43dr {
  color: inherit;
  text-decoration: underline;
}
._18tr43dr:hover {
  color: var(--_1mefrpq7);
}
@container _18tr43d0 scroll-state(scrollable: top) {
  ._18tr43d2 {
    box-shadow: 0 1px 0 0 var(--_1mefrpq2);
  }
}
._4ncw6d0 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--_1mefrpq5);
}
.xd268d2 {
  display: block;
  margin-block: 24px;
  color: inherit;
  text-decoration: none;
}
.xd268d3 {
  font: 600 24px/1 var(--_1mefrpqg);
  color: var(--_1mefrpq7);
}
.xd268d2:hover .xd268d3 {
  text-decoration: underline;
  text-decoration-color: var(--_1mefrpq9);
}
.xd268d4 {
  margin-top: 8px;
  font: 400 16px/1 var(--_1mefrpqg);
  color: var(--_1mefrpq5);
}
._1ylmmxg2 {
  display: block;
  margin-block: 24px;
  color: inherit;
  text-decoration: none;
}
._1ylmmxg3 {
  font: 600 24px/1 var(--_1mefrpqg);
  color: var(--_1mefrpq7);
}
._1ylmmxg2:hover ._1ylmmxg3 {
  text-decoration: underline;
  text-decoration-color: var(--_1mefrpq9);
}
._1ylmmxg4 {
  margin-top: 8px;
  font: 400 16px/1 var(--_1mefrpqg);
  color: var(--_1mefrpq5);
}
.ioquji1 > div > svg {
  fill: var(--_1mefrpq4);
  stroke: var(--_1mefrpq4);
  background-color: transparent !important;
}
.ns7bu90 {
  font: 400 16px/24px var(--_1mefrpqg);
}
.ns7bu91 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  -moz-column-gap: 32px;
       column-gap: 32px;
}
.ns7bu92 {
  outline: none;
  border: 1px dashed var(--_1mefrpq2);
  width: 256px;
  height: 256px;
  border-radius: 16px;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--_1mefrpq6);
  position: relative;
}
.ns7bu92:before {
  content: "Pick an Image";
}
.ns7bu93 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: clip;
}
.ns7bu95 {
  opacity: 0;
}
.ns7bu96 {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.ns7bu96 label span, .ns7bu96 label code {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
._5401ub0 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--_1mefrpq5);
}
.ewgw9c0 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--_1mefrpq5);
}
._129usv20 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--_1mefrpq5);
}
._12dw5rh0 {
  padding-inline: 32px;
  padding-block: 20px;
}
._12dw5rh1 {
  display: flex;
  align-items: center;
  -moz-column-gap: 4px;
       column-gap: 4px;
  position: relative;
  overflow: clip;
  border: none;
  outline: none;
  padding-inline: 12px;
  padding-block: 8px;
  font: 500 14px/1 var(--_1mefrpqg);
  border-radius: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: var(--_1mefrpqa);
  box-shadow: inset 0 0 0 1px var(--_1mefrpqb);
}
._12dw5rh1:hover {
  background: var(--_1mefrpqc);
  box-shadow: inset 0 0 0 1px var(--_1mefrpqd);
}
._12dw5rh1:active {
  background: var(--_1mefrpqe);
  box-shadow: inset 0 0 0 1px var(--_1mefrpqf);
}
._12dw5rh2 {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
._12dw5rh3 {
  padding-block: 16px;
}
._12dw5rh4 {
  margin-block: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas: 
  'title       actions'
  'description actions'
;
  margin-inline: -16px;
  padding-inline: 16px;
  padding-block: 12px;
  border-radius: 9px;
}
._12dw5rh4:hover {
  background: oklch(100% 0% 0deg / 8%);
}
._12dw5rh5 {
  grid-area: title;
  font: 600 24px/1 var(--_1mefrpqg);
  color: var(--_1mefrpq7);
  text-decoration: none;
}
._12dw5rh5:hover {
  text-decoration: underline;
  text-decoration-color: var(--_1mefrpq9);
}
._12dw5rh6 {
  grid-area: description;
  margin-top: 8px;
  font: 400 16px/1 var(--_1mefrpqg);
  color: var(--_1mefrpq5);
}
._12dw5rh7 {
  grid-area: actions;
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
._12dw5rh4:not(:hover) ._12dw5rh7 {
  opacity: 0;
}
._12dw5rh8 {
  display: flex;
  align-items: center;
  -moz-column-gap: 4px;
       column-gap: 4px;
  border: none;
  outline: none;
  padding-inline: 8px;
  padding-block: 8px;
  border-radius: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  background: var(--_1mefrpqa);
  box-shadow: inset 0 0 0 1px var(--_1mefrpqb);
}
._12dw5rh8:hover {
  background: var(--_1mefrpqc);
  box-shadow: inset 0 0 0 1px var(--_1mefrpqd);
}
._12dw5rh8:active {
  background: var(--_1mefrpqe);
  box-shadow: inset 0 0 0 1px var(--_1mefrpqf);
}
._12dw5rh9 {
  color: var(--_1mefrpq4);
}
._12dw5rha {
  color: var(--_1mefrpq8);
}