export declare const STYLES = "\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\nhtml {\n  --icon-info: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-width%3D'2'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20stroke-linecap%3D'round'%20d%3D'M12%207h.01'%2F%3E%3Cpath%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20d%3D'M10%2011h2v5m-2%200h4'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n  --icon-zoom-out: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-linecap%3D'round'%20stroke-width%3D'2'%20d%3D'm21%2021l-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200a8.5%208.5%200%200%201%2017%200Zm-6%200H8'%2F%3E%3C%2Fsvg%3E\");\n  --icon-zoom-in: url(\"data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20fill%3D'none'%20stroke%3D'currentColor'%20stroke-linecap%3D'round'%20stroke-width%3D'2'%20d%3D'm21%2021l-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200a8.5%208.5%200%200%201%2017%200ZM10.5%207v3.5m0%200V14m0-3.5H14m-3.5%200H7'%2F%3E%3C%2Fsvg%3E\");\n}\nhtml {\n  --header-height: 54px;\n  --border-radius: .25rem;\n  --transition-all: all .2s cubic-bezier(.4,0,.2,1);\n  --btn-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n  --btn-border: 1px solid #9ca3af33;\n  --btn-border-hover: 1px solid var(--color-accent);\n\n  --color-accent: rgb(9, 158, 97);\n  --bg-main: rgb(255 255 255);\n  --bg-secondary: rgb(255 255 255);\n  --bg-tooltip: rgb(245 245 245);\n  --bg-button: transparent;\n  --bg-code: rgb(255, 255, 255, 0.1);\n  --bg-code-filter: brightness(0.6) contrast(2);\n  --text-primary: rgb(11, 16, 21);\n  --text-secondary: rgb(70, 70, 70);\n  --text-icons: rgb(70, 70, 70);\n  --scroll-bar: #80808080;\n  --border: 1px solid rgba(136, 136, 136, 0.3);\n\n  color-scheme: dark light;\n  color: var(--text-primary);\n  background: var(--bg-main);\n}\nhtml.dark {\n  --color-accent: rgb(9, 158, 97);\n  --bg-main: rgb(21, 21, 21);\n  --bg-secondary: rgb(27, 27, 27);\n  --bg-tooltip: rgb(24, 24, 24);\n  --bg-button: rgb(255, 255, 255, 0.1);\n  --bg-code: rgb(27, 27, 27);\n  --bg-code-filter: none;\n  --text-primary: rgb(255, 255, 255);\n  --text-secondary: rgb(170, 170, 170);\n  --text-icons: rgb(170, 170, 170);\n  --scroll-bar: #80808080;\n  --border: 1px solid #9ca3af33;\n  \n}\nbody {\n  height: 100vh;\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  display: block;\n}\n* {\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  scrollbar-width: 6px;\n  scrollbar-color: transparent\n}\n::-webkit-scrollbar {\n  height: 6px;\n  width: 6px\n}\n::-webkit-scrollbar-track {\n  background: transparent\n}\n::-webkit-scrollbar-thumb {\n  background: var(--scroll-bar);\n  border-radius: 3px\n}\n::-webkit-scrollbar-thumb:active {\n  background: var(--scroll-bar);\n  border-radius: 3px\n}\n\n.btn {\n  background: transparent;\n  \n}\n.btn-outline {\n  padding: 6px;\n  border-radius: var(--border-radius);\n  border: var(--border);\n  color: var(--text-icons);\n  transition: var(--transition-all);\n}\n.btn-outline:hover {\n  border-color: var(--color-accent);\n  color: var(--color-accent);\n}\n.btn-outline:active {\n  background: rgb(9 158 97 / 0.3);\n}\n.btn-outline:disabled {\n  border: var(--border);\n  color: var(--text-icons);\n  pointer-events: none;\n  opacity: 0.7;\n  transition: none;\n}\n.btn-outline .icon {\n  width: 16px;\n  height: 16px;\n  background-color: currentColor;\n  display: block;\n  transition: var(--transition-all);\n}\n.btn-outline .icon-zoom-in {\n  -webkit-mask: var(--icon-zoom-out) no-repeat;\n  mask: var(--icon-zoom-out) no-repeat;\n  mask-size: 100% 100%;\n  -webkit-mask-size: 100% 100%;\n}\n.btn-outline .icon-zoom-out {\n  -webkit-mask: var(--icon-zoom-in) no-repeat;\n  mask: var(--icon-zoom-in) no-repeat;\n  mask-size: 100% 100%;\n  -webkit-mask-size: 100% 100%;\n}\n.btn-outline .icon-info {\n  -webkit-mask: var(--icon-info) no-repeat;\n  mask: var(--icon-info) no-repeat;\n  mask-size: 100% 100%;\n  -webkit-mask-size: 100% 100%;\n}\n\n.caption {\n  margin: 0;\n  height: var(--header-height);\n  padding: 0.75rem 1rem 0.75rem;\n  border-bottom: var(--border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  position: relative;\n}\n.caption svg {\n  width: auto;\n  height: 24px;\n}\n.caption .size-selector {\n  display: flex;\n  gap: 0.5rem;\n}\n.buttons-container {\n  width: auto;\n  min-height: calc(100% - var(--header-height));\n  margin: 0;\n  padding: 1.25rem 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background-color: var(--bg-secondary);\n}\n.buttons-container .scrollable {\n  \n  padding: 0 1.25rem;\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  flex-wrap: wrap;\n}\n.preview {\n  height: calc(var(--icon-font-size, 22px) + 8px);\n  width: calc(var(--icon-font-size, 22px) + 8px);\n  margin: 4px;\n  display: inline-block;\n  border: 1px solid transparent;\n  background-color: transparent;\n  color: var(--text-icons);\n  outline: none;\n  padding: 3px;\n  border-radius: var(--border-radius);\n  position: relative;\n  box-sizing: content-box;\n  transition: border-color 0.2s ease-in-out, height 0.2s ease-in-out, width 0.2s ease-in-out;\n}\n.preview:hover {\n  border-color: var(--color-accent);\n  color: var(--color-accent);\n}\n.preview .inner {\n  display: inline-block;\n  width: 100%;\n  text-align: center;\n}\n.preview .inner i {\n  font-size: var(--icon-font-size, 22px);\n  line-height: 2rem;\n  display: block;\n  transition: font-size 0.2s ease-in-out;\n}\n[aria-label] {\n  cursor: pointer;\n  position: relative;\n}\n[aria-label]::after {\n  width: fit-content;\n  top: 100%;\n  background-color: var(--bg-tooltip);\n  border-radius: 4px;\n  border: 1px solid rgba(136, 136, 136, 0.3);\n  box-shadow: none;\n  color: rgb(50, 150, 114);\n  content: attr(aria-label);\n  font-size: 13px;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  font-style: normal;\n  font-weight: 400;\n  padding: 4px 8px 5px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  position: absolute;\n  transition: all .2s ease-in-out 0s;\n  transition-delay: 0s;\n  left: 50%;\n  transform: translate(-50%, 8px);\n  transform-origin: bottom;\n  z-index: 50;\n}\n[aria-label]:hover::after {\n  opacity: 1;\n  transform: translate(-50%, 4px);\n}\n\ndialog {\n  top: 0;\n  width: 500px;\n  margin-top: 80px;\n  padding: 0;\n  color: var(--text-primary);\n  border: var(--border);\n  background-color: var(--bg-main);\n  box-shadow: 0 0 2px 1px rgb(0 0 0 / .1);\n  border-radius: 6px;\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  height: var(--header-height);\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: currentColor;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  position: relative;\n  cursor: pointer;\n}\ndialog .content {\n  max-height: calc(70vh - var(--header-height));\n  padding: 0 15px 10px;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  overflow-y: auto;\n}\ndialog .content .cell-1 {\n  width: 140px;\n  height: 140px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\ndialog .content .cell-1 .icon {\n  font-size: 4em;\n}\ndialog .content .cell-2 {\n  width: calc(100% - 160px);\n  position: relative;\n}\ndialog .content .cell-2 .example {\n  min-height: 52px;\n  margin-top: 10px;\n  padding: 12px 16px;\n  border-radius: 4px;\n  border: var(--border);\n  background: var(--bg-code);\n  overflow-x: auto;\n  box-sizing: border-box;\n  filter: var(--bg-code-filter);\n}\ndialog .content .cell-2 code {\n  font-size: 12px;\n  white-space: nowrap;\n   user-select: text;\n  -moz-user-select: text;\n  -webkit-user-select: text;\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: var(--border);\n  border-radius: 6px;\n  background: var(--bg-secondary);\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}\ndialog .content .cell-2 .codepoint input {\n  width: 80px;\n  height: 27px;\n  padding: 0 8px;\n  text-align: center;\n  border: var(--border);\n  border-radius: 6px;\n   background: var(--bg-secondary);\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  height: unset;\n  margin-bottom: 4px;\n  padding: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  text-align: start;\n  border: none;\n}\ndialog .content .cell-3 .buttons {\n  width: 100%;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 4px;\n}\ndialog .content .cell-3 .buttons button.active {\n  background-color: rgb(9 158 97 / 0.3) !important;\n}\n\ndialog .content .class-utils-list {\n  width: 100%;\n  margin-top: 1rem;\n  text-align: left;\n  font-weight: 400;\n  font-size: 13px;\n}\ndialog .content .class-utils-list caption {\n  margin-bottom: 0.5rem;\n  text-align: left;\n  font-weight: 600;\n  font-size: 14px;\n}\ndialog .content .class-utils-list th {\n  font-weight: 500;\n}\ndialog .content .class-utils-list td {\n  margin: 5px 0;\n  color: var(--text-secondary);\n  font-weight: 400;\n  font-size: 13px;\n  vertical-align: text-top;\n}\ndialog .content .class-utils-list td.cn {\n  padding-right: 0.5rem;\n  color: #6AAB73;\n  font-size: 13px;\n  white-space: nowrap;\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";