123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Nanum+Gothic&display=swap");
@tailwind base;@tailwind components;@tailwind utilities;
dialog::backdrop {  @apply backdrop-filter backdrop-brightness-50 backdrop-grayscale;}
.editor {  position: relative;  text-align: left;  box-sizing: border-box;  padding: 0;  overflow: hidden;}
.editor textarea {  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 100%;  resize: none;  color: inherit;  overflow: hidden;  padding: 0.5rem;  -webkit-text-fill-color: transparent;}
.editor textarea:placeholder-shown {  -webkit-text-fill-color: inherit !important;}
.editor .editArea {  margin: 0;  border: 0;  background: none;  box-sizing: inherit;  display: inherit;  font-family: inherit;  font-size: inherit;  font-style: inherit;  font-variant-ligatures: inherit;  font-weight: inherit;  letter-spacing: inherit;  line-height: inherit;  tab-size: inherit;  text-indent: inherit;  text-rendering: inherit;  text-transform: inherit;  white-space: pre-wrap;  word-break: keep-all;  overflow-wrap: break-word;}
.editor .highlight {  position: relative;  pointer-events: none;  padding: 0.5rem;}
/* JSON highlighting CSS */
.json .key {  @apply text-primary-700 dark:text-primary-300;}
.json .number {  @apply text-purple-700 dark:text-purple-300;}
.json .string {  @apply whitespace-pre-wrap break-words text-blue-700 dark:text-blue-300;}
.json .true {  @apply text-yellow-700 dark:text-yellow-300;}
.json .false {  @apply text-yellow-700 dark:text-yellow-300;}
.json .null {  @apply text-gray-600 dark:text-gray-400;}
/* Markdown highlighting CSS */
/* -Code- */
.markdown :not(pre) > code {  @apply font-mono text-sm py-1 px-1.5 rounded bg-gray-50 dark:bg-gray-900;}
.markdown pre {  @apply font-mono text-sm p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900    overflow-x-auto;}
/* -General- */
.markdown a {  @apply underline;}
.markdown h1 {  @apply font-bold text-xl md:text-2xl lg:text-3xl pb-2 mb-3 text-primary-400    dark:text-primary-600 scroll-mt-16;}
.markdown h2 {  @apply font-bold text-lg md:text-xl lg:text-2xl pb-2 mb-3 text-primary-400    dark:text-primary-600 scroll-mt-16;}
.markdown h3 {  @apply font-bold md:text-lg md:font-normal lg:text-xl lg:font-normal mb-3 mt-4    scroll-mt-16;}
.markdown h4 {  @apply font-semibold md:font-bold lg:text-lg lg:font-normal mb-2 mt-3    scroll-mt-16;}
.markdown h5 {  @apply font-bold italic md:font-semibold lg:font-bold mb-2 mt-3 scroll-mt-16;}
.markdown h6 {  @apply font-semibold md:italic mb-1 mt-2 scroll-mt-16;}
.markdown hr {  @apply m-2 border-gray-500 dark:border-gray-400;}
.markdown ol {  @apply list-decimal lg:list-inside;}
.markdown ul {  @apply list-disc list-inside lg:list-outside lg:mx-6;}
.markdown p {  @apply my-2;}
.markdown kbd {  @apply px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border    border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100    dark:border-gray-500;}
.markdown table {  @apply table-auto;}
.markdown td {  @apply p-2 border border-solid border-gray-500 dark:border-gray-400;}
.markdown th {  @apply font-bold text-center;}
/* -Links- */
.markdown .anchor {  @apply float-left -ml-6 pr-1 leading-4;}
.markdown svg.octicon {  @apply fill-current;}
.markdown h1 .octicon-link,.markdown h2 .octicon-link,.markdown h3 .octicon-link,.markdown h4 .octicon-link,.markdown h5 .octicon-link,.markdown h6 .octicon-link {  @apply invisible mt-2;}
.markdown h1:hover .octicon-link,.markdown h2:hover .octicon-link,.markdown h3:hover .octicon-link,.markdown h4:hover .octicon-link,.markdown h5:hover .octicon-link,.markdown h6:hover .octicon-link {  @apply visible;}
/* -Syntax Highlighting- */
.markdown .highlight .token {  @apply text-cyan-600 dark:text-cyan-400;}
.markdown .highlight .token.class-name {  @apply text-cyan-600 dark:text-cyan-400;}
.markdown .highlight .token.comment {  @apply text-gray-600 dark:text-gray-400;}
.markdown .highlight .token.keyword {  @apply text-magenta-500;}
.markdown .highlight .token.number {  @apply text-purple-400 dark:text-purple-300;}
.markdown .highlight .token.operator {  @apply text-magenta-500;}
.markdown .highlight .token.punctuation {  @apply text-black dark:text-white;}
.markdown .highlight .token.string {  @apply text-orange-500 dark:text-yellow-400;}