export declare const STYLES = "\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\nhtml {\n  --border-radius: 8px;\n  --preview-bg: 2 6 23;\n  --label-bg: 12 74 110;\n\n  color-scheme: dark;\n  color: #e2e8f0;\n  background: #0f172a;\n}\nbody {\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif, ui-sans-serif, \n                system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \n                Roboto, \"Noto Sans\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \n               \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  font-weight: 300;\n  font-size: 16px;\n  margin: 0;\n  text-align: center;\n}\n.caption {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 16px;\n  position: relative;\n}\n.caption svg {\n  width: auto;\n  height: 56px;\n}\n.caption svg .text-paths {\n  color: white !important;\n}\n.buttons-container {\n  width: auto;\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 10px 20px;\n}\n.preview {\n  width: 110px;\n  height: 130px;\n  margin: 10px;\n  display: inline-block;\n  border: none;\n  background-color: transparent;\n  color: inherit;\n  outline: none;\n  padding: 0;\n  border-radius: var(--border-radius);\n  position: relative;\n}\n.preview .inner {\n  display: inline-block;\n  width: 100%;\n  text-align: center;\n  background: rgb(var(--preview-bg) / 0.7);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n}\n.preview .inner i {\n  line-height: 100px;\n  font-size: 36px;\n}\n.label {\n  display: inline-block;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 5px;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: Monaco, monospace;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background: rgb(var(--label-bg));\n  border-radius: 0 0 var(--border-radius) var(--border-radius);\n}\n[aria-label] {\n  cursor: pointer;\n  position: relative;\n}\n[aria-label]::after {\n  width: 120px;\n  background-color: rgba(28, 28, 30, 0.9);\n  border-radius: 5px;\n  border: .5px solid rgba(28, 28, 30, 1);\n  margin-bottom: 16px;\n  box-shadow: 0 0 .1875rem rgba(0, 0, 0, .3);\n  color: #f0f0f0;\n  content: attr(aria-label);\n  font-size: 12px;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-style: normal;\n  font-weight: 500;\n  padding: 10px;\n  text-indent: 0;\n  text-shadow: none;\n  white-space: nowrap;\n  z-index: 50;\n}\n[aria-label]::before {\n  content: \"\";\n  z-index: 49;\n  border: 8px solid transparent;\n  border-top-color: rgba(28, 28, 30, 1);\n  height: 0;\n  width: 0;\n  display: block;\n}\n[aria-label]::after,\n[aria-label]::before {\n  bottom: 100%;\n  box-sizing: border-box;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  transition: all .2s ease-in-out 0s;\n  transition-delay: 0s;\n  left: 50%;\n  transform: translate(-50%, 10px);\n  transform-origin: top;\n}\n[aria-label]:hover::after,\n[aria-label]:hover::before {\n  opacity: 1;\n  transform: translate(-50%, 4px);\n}\n\n.font-selector {\n  left: 10px;\n  top: 20px;\n  width: 240px;\n  position: absolute;\n  z-index: 100;\n}\n.font-selector label {\n  padding-left: 6px;\n  margin-bottom: 4px;\n  font-weight: 500;\n  font-size: 13px;\n  color: #bcbcbc;\n  text-align: start;\n  display: block;\n}\n.font-selector .select-wrap {\n  width: 100%;\n  min-width: 15ch;\n  max-width: 30ch;\n  border: 1px solid rgb(255 255 255 / 0.1);\n  border-radius: 6px;\n  padding: 0 10px;\n  font-size: 14px;\n  cursor: pointer;\n  color: white;\n  line-height: 1.1;\n  background-color: rgb(var(--preview-bg));\n  background-image: linear-gradient(to top, rgb(var(--preview-bg) / 0.9), rgb(var(--preview-bg)) 33%);\n  display: grid;\n  grid-template-areas: \"select\";\n  align-items: center;\n  position: relative;\n}\n.font-selector .select-wrap::after {\n  content: \"\";\n  width: 10px;\n  height: 6px;\n  background-color: rgb(255 255 255 / 0.8);\n  clip-path: polygon(100% 0%, 0 0%, 50% 100%);\n  grid-area: select;\n  justify-self: end;\n}\n.font-selector .select-wrap select {\n  height: 32px;\n  appearance: none;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  color: white;\n  width: 100%;\n  background-color: rgb(var(--preview-bg));\n  background-image: linear-gradient(to top, rgb(var(--preview-bg) / 0.9), rgb(var(--preview-bg)) 33%);\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n  outline: none;\n  grid-area: select;\n}\n.font-selector .select-wrap select::-ms-expand {\n  display: none;\n}\n.font-selector .error {\n  margin-top: 4px;\n  color: #da4040;\n  font-size: 12px;\n  line-height: 1.3;\n  text-align: start;\n}\n\ndialog {\n  top: 0;\n  width: 600px;\n  margin-top: 250px;\n  padding: 0;\n  color: white;\n  border: 1px solid rgba(255 255 255 / 0.1);\n  background-color: rgb(var(--preview-bg) / 0.95);\n  box-shadow: 0 0 2px 1px rgb(0 0 0 / .1);\n  border-radius: var(--border-radius);\n  overflow: visible;\n  user-select: none;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  transition: all 0.2s ease-out;\n  z-index: 5000;\n  transform: translateY(-20px);\n  opacity: 0;\n  display: none;\n}\ndialog::backdrop {\n  background-color: rgb(0 0 0 / 0.4) !important;\n  transition: all 0.2s ease-in;\n  opacity: 0;\n}\ndialog[open] {\n  opacity: 1;\n  transform: translateY(0);\n}\ndialog[open]::backdrop {\n -webkit-backdrop-filter: saturate(120%) blur(5px);\n  backdrop-filter: saturate(120%) blur(5px);\n  opacity: 1;\n}\ndialog .header {\n  margin: 0;\n  padding: 10px 15px 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\ndialog .header .close {\n  left: 10px;\n  top: -3px;\n  width: 30px;\n  height: 30px;\n  font-size: 20px;\n  color: white;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  position: relative;\n  cursor: pointer;\n}\ndialog .content {\n  padding: 0 15px 10px;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\ndialog .content .cell-1 {\n  width: 180px;\n  height: 180px;\n  padding: 50px 0;\n}\ndialog .content .cell-1 .icon {\n  display: block;\n}\ndialog .content .cell-2 {\n  width: calc(100% - 200px);\n  position: relative;\n}\ndialog .content .cell-2 .example {\n  min-height: 60px;\n  margin-top: 10px;\n  padding: 18px 20px;\n  border-radius: 6px;\n  border: 1px solid rgb(255 255 255 / 0.2);\n  background: rgb(10 10 10);\n  overflow-x: auto;\n  box-sizing: border-box;\n}\ndialog .content .cell-2 code {\n  font-size: 13px;\n  white-space: nowrap;\n   user-select: text;\n  -moz-user-select: text;\n  -webkit-user-select: text;\n  cursor: copy;\n}\ndialog .content .cell-2 .color-picker {\n  margin-top: 16px;\n  text-align: end;\n  display: flex;\n  align-items: center;\n  justify-content: end;\n}\ndialog .content .cell-2 .color-picker label {\n  font-size: 14px;  \n}\ndialog .content .cell-2 .color-picker input {\n  margin-left: 10px;\n  border: 1px solid rgb(255 255 255 / 0.2);\n  border-radius: 6px;\n  background: rgb(10 10 10);\n}\ndialog .content .cell-2 .codepoint {\n  margin-top: 10px;\n  text-align: end;\n  display: flex;\n  align-items: center;\n  justify-content: end;\n}\ndialog .content .cell-2 .codepoint label {\n  font-size: 14px;\n}\ndialog .content .cell-2 .codepoint > div {\n   margin-left: 10px;\n   \n}\ndialog .content .cell-2 .codepoint input {\n  width: 80px;\n  height: 27px;\n  padding: 0 8px;\n  text-align: center;\n  border: 1px solid rgb(255 255 255 / 0.2);\n  border-radius: 6px;\n  background: rgb(10 10 10);\n  user-select: text;\n  -moz-user-select: text;\n  -webkit-user-select: text;\n  cursor: copy;\n}\n\ndialog .content .cell-3 {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n}\ndialog .content .cell-3 .caption {\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: start;\n}\ndialog .content .cell-3 .buttons {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  column-gap: 4px;\n}\ndialog .content .cell-3 .buttons button {\n  height: 24px;\n  margin-bottom: 4px;\n  padding: 2px 6px;\n  font-size: 12px;\n  line-height: 1;\n  color: white;\n  background-color: rgba(255 255 255 / 0.1);\n  border: none;\n  border-radius: 3px;\n  display: inline-block;\n  cursor: pointer;\n}\ndialog .content .cell-3 .buttons button.active {\n  background-color: rgb(var(--label-bg));\n}\n\ndialog ::-webkit-scrollbar {\n  width: 4px;\n  height: 4px;\n  transition: all .15s ease-in-out;\n}\ndialog ::-webkit-scrollbar-track {\n  padding: 4px 0;\n  position: relative;\n  background-color: transparent;\n}\ndialog ::-webkit-scrollbar-button {\n  height: 8px;\n  background-color: transparent;\n}\ndialog ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background-color: rgb(255 255 255 / 0.5);\n}\ndialog ::-webkit-scrollbar-corner {\n  display: none;\n}\n";