phx-react 1.3.1578 → 1.3.1580

package/dist/cjs/components/TextEditorV2/style.js

@@ -1,9 +1,1642 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = EditorStyle;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 function EditorStyle() {
-    return (react_1.default.createElement("style", null, "\n.ExcalidrawModal__overlay {\n  display: flex;\n  align-items: center;\n  position: fixed;\n  flex-direction: column;\n  top: 0px;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  flex-grow: 0px;\n  flex-shrink: 1px;\n  z-index: 100;\n  background-color: rgba(40, 40, 40, 0.6);\n}\n.ExcalidrawModal__actions {\n  text-align: end;\n  position: absolute;\n  right: 5px;\n  top: 5px;\n  z-index: 1;\n}\n.ExcalidrawModal__actions button {\n  background-color: #fff;\n  border-radius: 5px;\n}\n.ExcalidrawModal__row {\n  position: relative;\n  padding: 40px 5px 5px;\n  width: 70vw;\n  height: 70vh;\n  border-radius: 8px;\n  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);\n}\n.ExcalidrawModal__row > div {\n  border-radius: 5px;\n}\n.ExcalidrawModal__modal {\n  position: relative;\n  z-index: 10;\n  top: 50px;\n  width: auto;\n  left: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: #eee;\n}\n.ExcalidrawModal__discardModal {\n  margin-top: 60px;\n  text-align: center;\n}  \n\n[type='page-break'] {\n  position: relative;\n  display: block;\n  width: calc(100% + var(--editor-input-padding, 28px) * 2);\n  overflow: unset;\n  margin-left: calc(var(--editor-input-padding, 28px) * -1);\n  margin-top: var(--editor-input-padding, 28px);\n  margin-bottom: var(--editor-input-padding, 28px);\n\n  border: none;\n  border-top: 1px dashed var(--editor-color-secondary, #eeeeee);\n  border-bottom: 1px dashed var(--editor-color-secondary, #eeeeee);\n  background-color: var(--editor-color-secondary, #eeeeee);\n}\n\n[type='page-break']::before {\n  content: '';\n\n  position: absolute;\n  top: 50%;\n  left: calc(var(--editor-input-padding, 28px) + 12px);\n  transform: translateY(-50%);\n  opacity: 0.5;\n\n  background-size: cover;\n  background-image: url(/icons/scissors.svg);\n  width: 16px;\n  height: 16px;\n}\n\n[type='page-break']::after {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  display: block;\n  padding: 2px 6px;\n  border: 1px solid #ccc;\n  background-color: #fff;\n\n  content: 'PAGE BREAK';\n  font-size: 12px;\n  color: #000;\n  font-weight: 600;\n}\n\n.selected[type='page-break'] {\n  border-color: var(--editor-color-primary, #4766cb);\n}\n\n.selected[type='page-break']::before {\n  opacity: 1;\n}\n\n.ImageNode__contentEditable {\n  min-height: 20px;\n  border: 0px;\n  resize: none;\n  cursor: text;\n  caret-color: rgb(5, 5, 5);\n  display: block;\n  position: relative;\n  outline: 0px;\n  padding: 10px;\n  user-select: text;\n  font-size: 12px;\n  width: calc(100% - 20px);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.ImageNode__placeholder {\n  font-size: 12px;\n  color: #888;\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  top: 10px;\n  left: 10px;\n  user-select: none;\n  white-space: nowrap;\n  display: inline-block;\n  pointer-events: none;\n}\n\n.image-control-wrapper--resizing {\n  touch-action: none;\n}\n\n\n.InlineImageNode__contentEditable {\n  min-height: 20px;\n  border: 0px;\n  resize: none;\n  cursor: text;\n  caret-color: rgb(5, 5, 5);\n  display: block;\n  position: relative;\n  tab-size: 1;\n  outline: 0px;\n  padding: 10px;\n  user-select: text;\n  font-size: 14px;\n  line-height: 1.4em;\n  width: calc(100% - 20px);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.InlineImageNode__placeholder {\n  font-size: 12px;\n  color: #888;\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  bottom: 10px;\n  left: 10px;\n  user-select: none;\n  white-space: nowrap;\n  display: inline-block;\n  pointer-events: none;\n}\n\n.PollNode__container {\n  border: 1px solid #eee;\n  background-color: #fcfcfc;\n  border-radius: 10px;\n  max-width: 600px;\n  min-width: 400px;\n  cursor: pointer;\n  user-select: none;\n}\n.PollNode__container.focused {\n  outline: 2px solid rgb(60, 132, 244);\n}\n.PollNode__inner {\n  margin: 15px;\n  cursor: default;\n}\n.PollNode__heading {\n  margin-left: 0px;\n  margin-top: 0px;\n  margin-right: 0px;\n  margin-bottom: 15px;\n  color: #444;\n  text-align: center;\n  font-size: 18px;\n}\n.PollNode__optionContainer {\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 10px;\n  align-items: center;\n}\n.PollNode__optionInputWrapper {\n  display: flex;\n  flex: 10px;\n  border: 1px solid rgb(61, 135, 245);\n  border-radius: 5px;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n}\n.PollNode__optionInput {\n  display: flex;\n  flex: 1px;\n  border: 0px;\n  padding: 7px;\n  color: rgb(61, 135, 245);\n  background-color: transparent;\n  font-weight: bold;\n  outline: 0px;\n  z-index: 0;\n}\n.PollNode__optionInput::placeholder {\n  font-weight: normal;\n  color: #999;\n}\n.PollNode__optionInputVotes {\n  background-color: rgb(236, 243, 254);\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  transition: width 1s ease;\n  z-index: 0;\n}\n.PollNode__optionInputVotesCount {\n  color: rgb(61, 135, 245);\n  position: absolute;\n  right: 15px;\n  font-size: 12px;\n  top: 5px;\n}\n.PollNode__optionCheckboxWrapper {\n  position: relative;\n  display: flex;\n  width: 22px;\n  height: 22px;\n  border: 1px solid #999;\n  margin-right: 10px;\n  border-radius: 5px;\n}\n.PollNode__optionCheckboxChecked {\n  border: 1px solid rgb(61, 135, 245);\n  background-color: rgb(61, 135, 245);\n}\n.PollNode__optionCheckboxChecked:after {\n  content: '';\n  cursor: pointer;\n  border-color: #fff;\n  border-style: solid;\n  position: absolute;\n  display: block;\n  top: 4px;\n  width: 5px;\n  left: 8px;\n  height: 9px;\n  margin: 0;\n  transform: rotate(45deg);\n  border-width: 0 2px 2px 0;\n}\n.PollNode__optionCheckbox {\n  border: 0px;\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.PollNode__optionDelete {\n  position: relative;\n  display: flex;\n  width: 28px;\n  height: 28px;\n  margin-left: 6px;\n  border: 0px;\n  background-color: transparent;\n  background-position: 6px 6px;\n  background-repeat: no-repeat;\n  z-index: 0;\n  cursor: pointer;\n  border-radius: 5px;\n  opacity: 0.3;\n}\n.PollNode__optionDelete:before,\n.PollNode__optionDelete:after {\n  position: absolute;\n  display: block;\n  content: '';\n  background-color: #999;\n  width: 2px;\n  height: 15px;\n  top: 6px;\n  left: 13px;\n}\n.PollNode__optionDelete:before {\n  transform: rotate(-45deg);\n}\n.PollNode__optionDelete:after {\n  transform: rotate(45deg);\n}\n.PollNode__optionDelete:hover {\n  opacity: 1;\n  background-color: #eee;\n}\n.PollNode__optionDeleteDisabled {\n  cursor: not-allowed;\n}\n.PollNode__optionDeleteDisabled:hover {\n  opacity: 0.3;\n  background-color: transparent;\n}\n.PollNode__footer {\n  display: flex;\n  justify-content: center;\n}\n\n.StickyNode__contentEditable {\n  min-height: 20px;\n  border: 0;\n  resize: none;\n  cursor: text;\n  font-size: 24px;\n  caret-color: rgb(5, 5, 5);\n  display: block;\n  position: relative;\n  outline: 0;\n  padding: 10px;\n  user-select: text;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n.StickyNode__placeholder {\n  font-size: 24px;\n  color: #999;\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  top: 30px;\n  left: 20px;\n  width: 120px;\n  user-select: none;\n  white-space: nowrap;\n  display: inline-block;\n  pointer-events: none;\n}\n\n.code-action-menu-container .prettier-wrapper {\n  position: relative;\n}\n\n.code-action-menu-container .prettier-wrapper .code-error-tips {\n  padding: 5px;\n  border-radius: 4px;\n  color: #fff;\n  background: #222;\n  margin-top: 4px;\n  position: absolute;\n  top: 26px;\n  right: 0;\n}\n\n.code-action-menu-container {\n  height: 35.8px;\n  font-size: 10px;\n  color: rgba(0, 0, 0, 0.5);\n  position: absolute;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  user-select: none;\n}\n\n.code-action-menu-container .code-highlight-language {\n  margin-right: 4px;\n}\n\n.code-action-menu-container button.menu-item {\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 4px;\n  background: none;\n  cursor: pointer;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: rgba(0, 0, 0, 0.5);\n  text-transform: uppercase;\n}\n\n.code-action-menu-container button.menu-item i.format {\n  height: 16px;\n  width: 16px;\n  opacity: 0.6;\n  display: flex;\n  color: rgba(0, 0, 0, 0.5);\n  background-size: contain;\n}\n\n.code-action-menu-container button.menu-item:hover {\n  border: 1px solid rgba(0, 0, 0, 0.3);\n  opacity: 0.9;\n}\n\n.code-action-menu-container button.menu-item:active {\n  background-color: rgba(223, 232, 250);\n  border: 1px solid rgba(0, 0, 0, 0.45);\n}\n\n.Collapsible__container {\n  background: #fcfcfc;\n  border: 1px solid #eee;\n  border-radius: 10px;\n  margin-bottom: 8px;\n}\n\n.Collapsible__title {\n  cursor: pointer;\n  padding: 5px 5px 5px 20px;\n  position: relative;\n  font-weight: bold;\n  list-style: none;\n  outline: none;\n}\n\n.Collapsible__title::marker,\n.Collapsible__title::-webkit-details-marker {\n  display: none;\n}\n\n.Collapsible__title:before {\n  border-style: solid;\n  border-color: transparent;\n  border-width: 4px 6px 4px 6px;\n  border-left-color: #000;\n  display: block;\n  content: '';\n  position: absolute;\n  left: 7px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.Collapsible__container[open] > .Collapsible__title:before {\n  border-color: transparent;\n  border-width: 6px 4px 0 4px;\n  border-top-color: #000;\n}\n\n.Collapsible__content {\n  padding: 0 5px 5px 20px;\n}\n\n.Collapsible__collapsed .Collapsible__content {\n  display: none;\n  user-select: none;\n}\n\n.draggable-block-menu {\n  border-radius: 4px;\n  padding: 2px 1px;\n  cursor: grab;\n  opacity: 0;\n  position: absolute;\n  left: 0;\n  top: 0;\n  will-change: transform;\n}\n\n.draggable-block-menu .icon {\n  width: 16px;\n  height: 16px;\n  opacity: 0.3;\n  background-image: url('https://cdn-s3.phx.asia/library/book-copy/06-02-2026/b7cdf4bb-0917-45bb-b266-bfef51969336-draggable-block-menu.png');\n}\n\n.draggable-block-menu:active {\n  cursor: grabbing;\n}\n\n.draggable-block-menu:hover {\n  background-color: #efefef;\n}\n\n.draggable-block-target-line {\n  pointer-events: none;\n  background: deepskyblue;\n  height: 4px;\n  position: absolute;\n  left: 0;\n  top: 0;\n  opacity: 0;\n  will-change: transform;\n}\n\n.link-editor {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  max-width: 400px;\n  width: 100%;\n  opacity: 0;\n  background-color: #fff;\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);\n  border-radius: 0 0 8px 8px;\n  transition: opacity 0.5s;\n  will-change: transform;\n}\n\n.link-editor .button {\n  width: 20px;\n  height: 20px;\n  display: inline-block;\n  padding: 6px;\n  border-radius: 8px;\n  cursor: pointer;\n  margin: 0 2px;\n}\n\n.link-editor .button.hovered {\n  width: 20px;\n  height: 20px;\n  display: inline-block;\n  background-color: #eee;\n}\n\n.link-editor .button i,\n.actions i {\n  background-size: contain;\n  display: inline-block;\n  height: 20px;\n  width: 20px;\n  vertical-align: -0.25em;\n}\n\n.floating-text-format-popup {\n  display: flex;\n  background: #fff;\n  padding: 4px;\n  vertical-align: middle;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 10;\n  opacity: 0;\n  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);\n  border-radius: 8px;\n  transition: opacity 0.5s;\n  height: 35px;\n  will-change: transform;\n}\n\n.floating-text-format-popup button.popup-item {\n  border: 0;\n  display: flex;\n  background: none;\n  border-radius: 10px;\n  padding: 8px;\n  cursor: pointer;\n  vertical-align: middle;\n}\n\n.floating-text-format-popup button.popup-item:disabled {\n  cursor: not-allowed;\n}\n\n.floating-text-format-popup button.popup-item.spaced {\n  margin-right: 2px;\n}\n\n.floating-text-format-popup button.popup-item i.format {\n  background-size: contain;\n  height: 18px;\n  width: 18px;\n  margin-top: 2px;\n  vertical-align: -0.25em;\n  display: flex;\n  opacity: 0.6;\n}\n\n.floating-text-format-popup button.popup-item:disabled i.format {\n  opacity: 0.2;\n}\n\n.floating-text-format-popup button.popup-item.active {\n  background-color: rgba(223, 232, 250, 0.3);\n}\n\n.floating-text-format-popup button.popup-item.active i {\n  opacity: 1;\n}\n\n.floating-text-format-popup .popup-item:hover:not([disabled]) {\n  background-color: #eee;\n}\n\n.floating-text-format-popup select.popup-item {\n  border: 0;\n  display: flex;\n  background: none;\n  border-radius: 10px;\n  padding: 8px;\n  vertical-align: middle;\n  -webkit-appearance: none;\n  appearance: none;\n  -moz-appearance: none;\n  width: 70px;\n  font-size: 14px;\n  color: #777;\n  text-overflow: ellipsis;\n}\n\n.floating-text-format-popup select.code-language {\n  text-transform: capitalize;\n  width: 130px;\n}\n\n.floating-text-format-popup .popup-item .text {\n  display: flex;\n  line-height: 20px;\n  vertical-align: middle;\n  font-size: 14px;\n  color: #777;\n  text-overflow: ellipsis;\n  width: 70px;\n  overflow: hidden;\n  height: 20px;\n  text-align: left;\n}\n\n.floating-text-format-popup .popup-item .icon {\n  display: flex;\n  width: 20px;\n  height: 20px;\n  user-select: none;\n  margin-right: 8px;\n  line-height: 16px;\n  background-size: contain;\n}\n\n.floating-text-format-popup i.chevron-down {\n  margin-top: 3px;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  user-select: none;\n}\n\n.floating-text-format-popup i.chevron-down.inside {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  margin-left: -25px;\n  margin-top: 11px;\n  margin-right: 10px;\n  pointer-events: none;\n}\n\n.floating-text-format-popup .divider {\n  width: 1px;\n  background-color: #eee;\n  margin: 0 4px;\n}\n\n@media (max-width: 1024px) {\n  .floating-text-format-popup button.insert-comment {\n    display: none;\n  }\n}\n\n.TableCellResizer__resizer {\n  position: absolute;\n}\n\n.table-of-contents .heading2 {\n  margin-left: 10px;\n}\n\n.table-of-contents .heading3 {\n  margin-left: 20px;\n}\n\n.selected-heading {\n  color: #3578e5;\n  position: relative;\n}\n\n.selected-heading-wrapper::before {\n  content: ' ';\n  position: absolute;\n  display: inline-block;\n  left: -30px;\n  top: 4px;\n  z-index: 10;\n  height: 4px;\n  width: 4px;\n  background-color: #3578e5;\n  border: solid 4px white;\n  border-radius: 50%;\n}\n\n.normal-heading {\n  cursor: pointer;\n  line-height: 20px;\n  font-size: 16px;\n}\n\n.table-of-contents {\n  color: #65676b;\n  position: fixed;\n  top: 200px;\n  right: -35px;\n  padding: 10px;\n  width: 250px;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  z-index: 1;\n  height: 300px;\n}\n\n.first-heading {\n  color: black;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n.headings {\n  list-style: none;\n  margin-top: 0;\n  margin-left: 10px;\n  padding: 0;\n  overflow: scroll;\n  width: 200px;\n  height: 220px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n}\n\n/* Hide scrollbar for Chrome, Safari and Opera */\n.headings::-webkit-scrollbar {\n  display: none;\n}\n\n.headings::before {\n  content: ' ';\n  position: absolute;\n  height: 220px;\n  width: 4px;\n  right: 240px;\n  margin-top: 5px;\n  background-color: #ccd0d5;\n  border-radius: 2px;\n}\n\n.normal-heading-wrapper {\n  margin-left: 32px;\n  position: relative;\n}\n\n.CommentEditorTheme__paragraph {\n  margin: 0;\n  position: relative;\n}\n\n.PlaygroundEditorTheme__ltr {\n  text-align: left;\n}\n.PlaygroundEditorTheme__rtl {\n  text-align: right;\n}\n\n.PlaygroundEditorTheme__quote {\n  margin: 0;\n  margin-left: 20px;\n  font-size: 15px;\n  color: rgb(101, 103, 107);\n  border-left-color: rgb(206, 208, 212);\n  border-left-width: 4px;\n  border-left-style: solid;\n  padding-left: 16px;\n}\n.PlaygroundEditorTheme__h1 {\n  font-size: 34px;\n  margin-bottom: 10px;\n}\n.PlaygroundEditorTheme__h2 {\n  font-size: 29px;\n  margin-bottom: 10px;\n}\n.PlaygroundEditorTheme__h3 {\n  font-size: 24px;\n  margin-bottom: 10px;\n}\n.PlaygroundEditorTheme__h4 {\n  font-size: 21px;\n  margin-bottom: 10px;\n}\n.PlaygroundEditorTheme__h5 {\n  font-size: 18px;\n  margin-bottom: 10px;\n}\n.PlaygroundEditorTheme__h6 {\n  font-size: 16px;\n  margin-bottom: 10px;\n}\n.PlaygroundEditorTheme__indent {\n  --lexical-indent-base-value: 40px;\n}\n.PlaygroundEditorTheme__textBold {\n  font-weight: bold;\n}\n.PlaygroundEditorTheme__textItalic {\n  font-style: italic;\n}\n.PlaygroundEditorTheme__textUnderline {\n  text-decoration: underline;\n}\n.PlaygroundEditorTheme__textStrikethrough {\n  text-decoration: line-through;\n}\n.PlaygroundEditorTheme__textUnderlineStrikethrough {\n  text-decoration: underline line-through;\n}\n.PlaygroundEditorTheme__textSubscript {\n  font-size: 0.8em;\n  vertical-align: sub !important;\n}\n.PlaygroundEditorTheme__textSuperscript {\n  font-size: 0.8em;\n  vertical-align: super;\n}\n.PlaygroundEditorTheme__textCode {\n  background-color: rgb(240, 242, 245);\n  padding: 1px 0.25rem;\n  font-family: Menlo, Consolas, Monaco, monospace;\n  font-size: 94%;\n}\n.PlaygroundEditorTheme__hashtag {\n  background-color: rgba(88, 144, 255, 0.15);\n  border-bottom: 1px solid rgba(88, 144, 255, 0.3);\n}\n.PlaygroundEditorTheme__link {\n  color: rgb(33, 111, 219);\n  text-decoration: none;\n}\n.PlaygroundEditorTheme__link:hover {\n  text-decoration: underline;\n  cursor: pointer;\n}\n.PlaygroundEditorTheme__code {\n  background-color: rgb(240, 242, 245);\n  font-family: Menlo, Consolas, Monaco, monospace;\n  display: block;\n  padding: 8px 8px 8px 52px;\n  line-height: 1.53;\n  font-size: 13px;\n  margin: 0;\n  margin-top: 8px;\n  margin-bottom: 8px;\n  overflow-x: auto;\n  position: relative;\n  tab-size: 2;\n}\n.PlaygroundEditorTheme__code:before {\n  content: attr(data-gutter);\n  position: absolute;\n  background-color: #eee;\n  left: 0;\n  top: 0;\n  border-right: 1px solid #ccc;\n  padding: 8px;\n  color: #777;\n  white-space: pre-wrap;\n  text-align: right;\n  min-width: 25px;\n}\n.PlaygroundEditorTheme__table {\n  border-collapse: collapse;\n  border-spacing: 0;\n  overflow-y: scroll;\n  overflow-x: scroll;\n  table-layout: fixed;\n  width: max-content;\n  margin: 30px 0;\n}\n.PlaygroundEditorTheme__tableSelection *::selection {\n  background-color: transparent;\n}\n.PlaygroundEditorTheme__tableSelected {\n  outline: 2px solid rgb(60, 132, 244);\n}\n.PlaygroundEditorTheme__tableCell {\n  border: 1px solid #bbb;\n  width: 75px;\n  min-width: 75px;\n  vertical-align: top;\n  text-align: start;\n  padding: 6px 8px;\n  position: relative;\n  outline: none;\n}\n.PlaygroundEditorTheme__tableCellSortedIndicator {\n  display: block;\n  opacity: 0.5;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  background-color: #999;\n}\n.PlaygroundEditorTheme__tableCellResizer {\n  position: absolute;\n  right: -4px;\n  height: 100%;\n  width: 8px;\n  cursor: ew-resize;\n  z-index: 10;\n  top: 0;\n}\n.PlaygroundEditorTheme__tableCellHeader {\n  background-color: #f2f3f5;\n  text-align: start;\n}\n.PlaygroundEditorTheme__tableCellSelected {\n  background-color: #c9dbf0;\n}\n.PlaygroundEditorTheme__tableCellPrimarySelected {\n  border: 2px solid rgb(60, 132, 244);\n  display: block;\n  height: calc(100% - 2px);\n  position: absolute;\n  width: calc(100% - 2px);\n  left: -1px;\n  top: -1px;\n  z-index: 2;\n}\n.PlaygroundEditorTheme__tableCellEditing {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);\n  border-radius: 3px;\n}\n.PlaygroundEditorTheme__tableAddColumns {\n  position: absolute;\n  top: 0;\n  width: 20px;\n  background-color: #eee;\n  height: 100%;\n  right: -25px;\n  animation: table-controls 0.2s ease;\n  border: 0;\n  cursor: pointer;\n}\n.PlaygroundEditorTheme__tableAddColumns:after {\n  background-image: url('/icons/plus.svg');\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.4;\n}\n.PlaygroundEditorTheme__tableAddColumns:hover {\n  background-color: #c9dbf0;\n}\n.PlaygroundEditorTheme__tableAddRows {\n  position: absolute;\n  bottom: -25px;\n  width: calc(100% - 25px);\n  background-color: #eee;\n  height: 20px;\n  left: 0;\n  animation: table-controls 0.2s ease;\n  border: 0;\n  cursor: pointer;\n}\n.PlaygroundEditorTheme__tableAddRows:after {\n  background-image: url(/icons/plus.svg);\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.4;\n}\n.PlaygroundEditorTheme__tableAddRows:hover {\n  background-color: #c9dbf0;\n}\n@keyframes table-controls {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.PlaygroundEditorTheme__tableCellResizeRuler {\n  display: block;\n  position: absolute;\n  width: 1px;\n  background-color: rgb(60, 132, 244);\n  height: 100%;\n  top: 0;\n}\n.PlaygroundEditorTheme__tableCellActionButtonContainer {\n  display: block;\n  right: 5px;\n  top: 6px;\n  position: absolute;\n  z-index: 4;\n  width: 20px;\n  height: 20px;\n}\n.PlaygroundEditorTheme__tableCellActionButton {\n  background-color: #eee;\n  display: block;\n  border: 0;\n  border-radius: 20px;\n  width: 20px;\n  height: 20px;\n  color: #222;\n  cursor: pointer;\n}\n.PlaygroundEditorTheme__tableCellActionButton:hover {\n  background-color: #ddd;\n}\n.PlaygroundEditorTheme__characterLimit {\n  display: inline;\n  background-color: #ffbbbb !important;\n}\n.PlaygroundEditorTheme__ol1 {\n  padding: 0;\n  margin: 0;\n  list-style-position: inside;\n  list-style-type: decimal;\n  margin-left: 20px;\n}\n.PlaygroundEditorTheme__ol2 {\n  padding: 0;\n  margin: 0;\n  list-style-type: upper-alpha;\n  list-style-position: inside;\n  margin-left: 20px;\n}\n.PlaygroundEditorTheme__ol3 {\n  padding: 0;\n  margin: 0;\n  list-style-type: lower-alpha;\n  list-style-position: inside;\n  margin-left: 20px;\n}\n.PlaygroundEditorTheme__ol4 {\n  padding: 0;\n  margin: 0;\n  list-style-type: upper-roman;\n  list-style-position: inside;\n  margin-left: 20px;\n}\n.PlaygroundEditorTheme__ol5 {\n  padding: 0;\n  margin: 0;\n  list-style-type: lower-roman;\n  list-style-position: inside;\n  margin-left: 20px;\n}\n.PlaygroundEditorTheme__ul {\n  padding: 0;\n  margin: 0;\n  list-style: disc;\n  margin-left: 20px;\n  list-style-position: inside;\n}\n\n.PlaygroundEditorTheme__listItemChecked,\n.PlaygroundEditorTheme__listItemUnchecked {\n  position: relative;\n  margin-left: 8px;\n  margin-right: 8px;\n  padding-left: 24px;\n  padding-right: 24px;\n  list-style-type: none;\n  outline: none;\n}\n.PlaygroundEditorTheme__listItemChecked {\n  text-decoration: line-through;\n}\n.PlaygroundEditorTheme__listItemUnchecked:before,\n.PlaygroundEditorTheme__listItemChecked:before {\n  content: '';\n  width: 16px;\n  height: 16px;\n  top: 2px;\n  left: 0;\n  cursor: pointer;\n  display: block;\n  background-size: cover;\n  position: absolute;\n}\n.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,\n.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {\n  left: auto;\n  right: 0;\n}\n.PlaygroundEditorTheme__listItemUnchecked:focus:before,\n.PlaygroundEditorTheme__listItemChecked:focus:before {\n  box-shadow: 0 0 0 2px #a6cdfe;\n  border-radius: 2px;\n}\n.PlaygroundEditorTheme__listItemUnchecked:before {\n  border: 1px solid #999;\n  border-radius: 2px;\n}\n.PlaygroundEditorTheme__listItemChecked:before {\n  border: 1px solid rgb(61, 135, 245);\n  border-radius: 2px;\n  background-color: #3d87f5;\n  background-repeat: no-repeat;\n}\n.PlaygroundEditorTheme__listItemChecked:after {\n  content: '';\n  cursor: pointer;\n  border-color: #fff;\n  border-style: solid;\n  position: absolute;\n  display: block;\n  top: 6px;\n  width: 3px;\n  left: 7px;\n  right: 7px;\n  height: 6px;\n  transform: rotate(45deg);\n  border-width: 0 2px 2px 0;\n}\n.PlaygroundEditorTheme__nestedListItem {\n  list-style-type: none;\n}\n.PlaygroundEditorTheme__nestedListItem:before,\n.PlaygroundEditorTheme__nestedListItem:after {\n  display: none;\n}\n.PlaygroundEditorTheme__tokenComment {\n  color: slategray;\n}\n.PlaygroundEditorTheme__tokenPunctuation {\n  color: #999;\n}\n.PlaygroundEditorTheme__tokenProperty {\n  color: #905;\n}\n.PlaygroundEditorTheme__tokenSelector {\n  color: #690;\n}\n.PlaygroundEditorTheme__tokenOperator {\n  color: #9a6e3a;\n}\n.PlaygroundEditorTheme__tokenAttr {\n  color: #07a;\n}\n.PlaygroundEditorTheme__tokenVariable {\n  color: #e90;\n}\n.PlaygroundEditorTheme__tokenFunction {\n  color: #dd4a68;\n}\n.PlaygroundEditorTheme__mark {\n  background: rgba(255, 212, 0, 0.14);\n  border-bottom: 2px solid rgba(255, 212, 0, 0.3);\n  padding-bottom: 2px;\n}\n.PlaygroundEditorTheme__markOverlap {\n  background: rgba(255, 212, 0, 0.3);\n  border-bottom: 2px solid rgba(255, 212, 0, 0.7);\n}\n.PlaygroundEditorTheme__mark.selected {\n  background: rgba(255, 212, 0, 0.5);\n  border-bottom: 2px solid rgba(255, 212, 0, 1);\n}\n.PlaygroundEditorTheme__markOverlap.selected {\n  background: rgba(255, 212, 0, 0.7);\n  border-bottom: 2px solid rgba(255, 212, 0, 0.7);\n}\n.PlaygroundEditorTheme__embedBlock {\n  user-select: none;\n}\n.PlaygroundEditorTheme__embedBlockFocus {\n  outline: 2px solid rgb(60, 132, 244);\n}\n.PlaygroundEditorTheme__layoutContaner {\n  display: grid;\n  gap: 10px;\n  margin: 10px 0;\n}\n.PlaygroundEditorTheme__layoutItem {\n  border: 1px dashed #ddd;\n  padding: 8px 16px;\n}\n\n.editor-image img {\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 90% !important;\n  border: 1px solid #e5e7eb;\n  margin-bottom: 10px;\n}\n\n.StickyEditorTheme__paragraph {\n  margin: 0;\n  position: relative;\n}\n\n.Button__root {\n  padding-top: 10px;\n  padding-bottom: 10px;\n  padding-left: 15px;\n  padding-right: 15px;\n  border: 0px;\n  background-color: #eee;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 14px;\n}\n.Button__root:hover {\n  background-color: #ddd;\n}\n.Button__small {\n  padding-top: 5px;\n  padding-bottom: 5px;\n  padding-left: 10px;\n  padding-right: 10px;\n  font-size: 13px;\n}\n.Button__disabled {\n  cursor: not-allowed;\n}\n.Button__disabled:hover {\n  background-color: #eee;\n}\n\n[type='checkbox']:checked,\n[type='checkbox']:not(:checked) {\n  position: absolute;\n  left: -9999px;\n}\n\n[type='checkbox']:checked + label,\n[type='checkbox']:not(:checked) + label {\n  position: relative;\n  padding-right: 55px;\n  cursor: pointer;\n  line-height: 20px;\n  display: inline-block;\n  color: #666;\n}\n\n[type='checkbox']:checked + label:before,\n[type='checkbox']:not(:checked) + label:before {\n  content: '';\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 18px;\n  height: 18px;\n  border: 1px solid #666;\n  background: #fff;\n}\n\n[type='checkbox']:checked + label:after,\n[type='checkbox']:not(:checked) + label:after {\n  content: '';\n  width: 8px;\n  height: 8px;\n  background: #222222;\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  -webkit-transition: all 0.2s ease;\n  transition: all 0.2s ease;\n}\n\n[type='checkbox']:not(:checked) + label:after {\n  opacity: 0;\n  -webkit-transform: scale(0);\n  transform: scale(0);\n}\n\n[type='checkbox']:checked + label:after {\n  opacity: 1;\n  -webkit-transform: scale(1);\n  transform: scale(1);\n}\n\n.color-picker-wrapper {\n  padding: 20px;\n}\n\n.color-picker-basic-color {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  margin: 0;\n  padding: 0;\n}\n\n.color-picker-basic-color button {\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  height: 16px;\n  width: 16px;\n  cursor: pointer;\n  list-style-type: none;\n}\n\n.color-picker-basic-color button.active {\n  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);\n}\n\n.color-picker-saturation {\n  width: 100%;\n  position: relative;\n  margin-top: 15px;\n  height: 150px;\n  background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);\n  user-select: none;\n}\n.color-picker-saturation_cursor {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  box-shadow: 0 0 15px #00000026;\n  box-sizing: border-box;\n  transform: translate(-10px, -10px);\n}\n.color-picker-hue {\n  width: 100%;\n  position: relative;\n  margin-top: 15px;\n  height: 12px;\n  background-image: linear-gradient(\n    to right,\n    rgb(255, 0, 0),\n    rgb(255, 255, 0),\n    rgb(0, 255, 0),\n    rgb(0, 255, 255),\n    rgb(0, 0, 255),\n    rgb(255, 0, 255),\n    rgb(255, 0, 0)\n  );\n  user-select: none;\n  border-radius: 12px;\n}\n\n.color-picker-hue_cursor {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  border: 2px solid #ffffff;\n  border-radius: 50%;\n  box-shadow: #0003 0 0 0 0.5px;\n  box-sizing: border-box;\n  transform: translate(-10px, -4px);\n}\n\n.color-picker-color {\n  border: 1px solid #ccc;\n  margin-top: 15px;\n  width: 100%;\n  height: 20px;\n}\n\n.ContentEditable__root {\n  border: 0;\n  font-size: 16px;\n  display: block;\n  position: relative;\n  outline: 0;\n  padding: 8px 28px 40px;\n  min-height: 150px;\n}\n@media (max-width: 1025px) {\n  .ContentEditable__root {\n    padding-left: 8px;\n    padding-right: 8px;\n  }\n}\n\n.DialogActions {\n  display: flex;\n  flex-direction: row;\n  justify-content: right;\n  margin-top: 20px;\n}\n\n.DialogButtonsList {\n  display: flex;\n  flex-direction: column;\n  justify-content: right;\n  margin-top: 20px;\n}\n\n.DialogButtonsList button {\n  margin-bottom: 20px;\n}\n\n.EquationEditor_inlineEditor {\n  padding: 0;\n  margin: 0;\n  border: 0;\n  outline: 0;\n  color: #8421a2;\n  background-color: inherit;\n  resize: none;\n}\n\n.EquationEditor_blockEditor {\n  padding: 0;\n  margin: 0;\n  border: 0;\n  outline: 0;\n  color: #8421a2;\n  background-color: inherit;\n  resize: none;\n  width: 100%;\n}\n\n.EquationEditor_inputBackground {\n  background-color: #eee;\n}\n\n.EquationEditor_dollarSign {\n  text-align: left;\n  color: #b0b0b0;\n}\n\n.Input__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 10px;\n}\n.Input__label {\n  display: flex;\n  flex: 1;\n  color: #666;\n}\n.Input__input {\n  display: flex;\n  flex: 2;\n  border: 1px solid #999;\n  padding-top: 7px;\n  padding-bottom: 7px;\n  padding-left: 10px;\n  padding-right: 10px;\n  font-size: 16px;\n  border-radius: 5px;\n  min-width: 0;\n}\n\n.KatexEquationAlterer_defaultRow {\n  display: flex;\n  flex-direction: row;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  justify-content: space-between;\n  overflow: hidden;\n}\n\n.KatexEquationAlterer_dialogActions {\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n  margin-top: 20px;\n  margin-bottom: 0;\n  justify-content: right;\n}\n\n.KatexEquationAlterer_centerRow {\n  display: flex;\n  flex-direction: row;\n  margin-top: 10px;\n  margin-bottom: 10px;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.KatexEquationAlterer_textArea {\n  width: 100%;\n  resize: none;\n  padding: 7px;\n}\n\n.Modal__overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  flex-direction: column;\n  top: 0px;\n  bottom: 0px;\n  left: 0px;\n  right: 0px;\n  background-color: rgba(40, 40, 40, 0.6);\n  flex-grow: 0;\n  flex-shrink: 1;\n  z-index: 100;\n}\n.Modal__modal {\n  padding: 20px;\n  min-height: 100px;\n  min-width: 300px;\n  display: flex;\n  flex-grow: 0;\n  background-color: #fff;\n  flex-direction: column;\n  position: relative;\n  box-shadow: 0 0 20px 0 #444;\n  border-radius: 10px;\n}\n.Modal__title {\n  color: #444;\n  margin: 0px;\n  padding-bottom: 10px;\n  border-bottom: 1px solid #ccc;\n}\n.Modal__closeButton {\n  border: 0px;\n  position: absolute;\n  right: 20px;\n  border-radius: 20px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  width: 30px;\n  height: 30px;\n  text-align: center;\n  cursor: pointer;\n  background-color: #eee;\n}\n.Modal__closeButton:hover {\n  background-color: #ddd;\n}\n.Modal__content {\n  padding-top: 20px;\n}\n\n.Placeholder__root {\n  font-size: 15px;\n  color: #999;\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  top: 8px;\n  left: 28px;\n  right: 28px;\n  user-select: none;\n  white-space: nowrap;\n  display: inline-block;\n  pointer-events: none;\n}\n@media (max-width: 1025px) {\n  .Placeholder__root {\n    left: 8px;\n  }\n}\n\nselect {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  background-color: transparent;\n  border: none;\n  padding: 0 1em 0 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: inherit;\n  line-height: inherit;\n\n  z-index: 1;\n  outline: none;\n}\n\n:root {\n  --select-border: #393939;\n  --select-focus: #101484;\n  --select-arrow: var(--select-border);\n}\n\n.select {\n  min-width: 160px;\n  max-width: 290px;\n  border: 1px solid var(--select-border);\n  border-radius: 0.25em;\n  padding: 0.25em 0.5em;\n  font-size: 1rem;\n  cursor: pointer;\n  line-height: 1.4;\n  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);\n}\n\n\n"));
+    return (react_1.default.createElement("style", null, `
+.ExcalidrawModal__overlay {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  flex-grow: 0px;
+  flex-shrink: 1px;
+  z-index: 100;
+  background-color: rgba(40, 40, 40, 0.6);
+}
+.ExcalidrawModal__actions {
+  text-align: end;
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  z-index: 1;
+}
+.ExcalidrawModal__actions button {
+  background-color: #fff;
+  border-radius: 5px;
+}
+.ExcalidrawModal__row {
+  position: relative;
+  padding: 40px 5px 5px;
+  width: 70vw;
+  height: 70vh;
+  border-radius: 8px;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+}
+.ExcalidrawModal__row > div {
+  border-radius: 5px;
+}
+.ExcalidrawModal__modal {
+  position: relative;
+  z-index: 10;
+  top: 50px;
+  width: auto;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background-color: #eee;
+}
+.ExcalidrawModal__discardModal {
+  margin-top: 60px;
+  text-align: center;
+}  
+
+[type='page-break'] {
+  position: relative;
+  display: block;
+  width: calc(100% + var(--editor-input-padding, 28px) * 2);
+  overflow: unset;
+  margin-left: calc(var(--editor-input-padding, 28px) * -1);
+  margin-top: var(--editor-input-padding, 28px);
+  margin-bottom: var(--editor-input-padding, 28px);
+
+  border: none;
+  border-top: 1px dashed var(--editor-color-secondary, #eeeeee);
+  border-bottom: 1px dashed var(--editor-color-secondary, #eeeeee);
+  background-color: var(--editor-color-secondary, #eeeeee);
+}
+
+[type='page-break']::before {
+  content: '';
+
+  position: absolute;
+  top: 50%;
+  left: calc(var(--editor-input-padding, 28px) + 12px);
+  transform: translateY(-50%);
+  opacity: 0.5;
+
+  background-size: cover;
+  background-image: url(/icons/scissors.svg);
+  width: 16px;
+  height: 16px;
+}
+
+[type='page-break']::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: block;
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+
+  content: 'PAGE BREAK';
+  font-size: 12px;
+  color: #000;
+  font-weight: 600;
+}
+
+.selected[type='page-break'] {
+  border-color: var(--editor-color-primary, #4766cb);
+}
+
+.selected[type='page-break']::before {
+  opacity: 1;
+}
+
+.ImageNode__contentEditable {
+  min-height: 20px;
+  border: 0px;
+  resize: none;
+  cursor: text;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  outline: 0px;
+  padding: 10px;
+  user-select: text;
+  font-size: 12px;
+  width: calc(100% - 20px);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ImageNode__placeholder {
+  font-size: 12px;
+  color: #888;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 10px;
+  left: 10px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.image-control-wrapper--resizing {
+  touch-action: none;
+}
+
+
+.InlineImageNode__contentEditable {
+  min-height: 20px;
+  border: 0px;
+  resize: none;
+  cursor: text;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  tab-size: 1;
+  outline: 0px;
+  padding: 10px;
+  user-select: text;
+  font-size: 14px;
+  line-height: 1.4em;
+  width: calc(100% - 20px);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.InlineImageNode__placeholder {
+  font-size: 12px;
+  color: #888;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  bottom: 10px;
+  left: 10px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.PollNode__container {
+  border: 1px solid #eee;
+  background-color: #fcfcfc;
+  border-radius: 10px;
+  max-width: 600px;
+  min-width: 400px;
+  cursor: pointer;
+  user-select: none;
+}
+.PollNode__container.focused {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PollNode__inner {
+  margin: 15px;
+  cursor: default;
+}
+.PollNode__heading {
+  margin-left: 0px;
+  margin-top: 0px;
+  margin-right: 0px;
+  margin-bottom: 15px;
+  color: #444;
+  text-align: center;
+  font-size: 18px;
+}
+.PollNode__optionContainer {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+  align-items: center;
+}
+.PollNode__optionInputWrapper {
+  display: flex;
+  flex: 10px;
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 5px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+.PollNode__optionInput {
+  display: flex;
+  flex: 1px;
+  border: 0px;
+  padding: 7px;
+  color: rgb(61, 135, 245);
+  background-color: transparent;
+  font-weight: bold;
+  outline: 0px;
+  z-index: 0;
+}
+.PollNode__optionInput::placeholder {
+  font-weight: normal;
+  color: #999;
+}
+.PollNode__optionInputVotes {
+  background-color: rgb(236, 243, 254);
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  transition: width 1s ease;
+  z-index: 0;
+}
+.PollNode__optionInputVotesCount {
+  color: rgb(61, 135, 245);
+  position: absolute;
+  right: 15px;
+  font-size: 12px;
+  top: 5px;
+}
+.PollNode__optionCheckboxWrapper {
+  position: relative;
+  display: flex;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #999;
+  margin-right: 10px;
+  border-radius: 5px;
+}
+.PollNode__optionCheckboxChecked {
+  border: 1px solid rgb(61, 135, 245);
+  background-color: rgb(61, 135, 245);
+}
+.PollNode__optionCheckboxChecked:after {
+  content: '';
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 4px;
+  width: 5px;
+  left: 8px;
+  height: 9px;
+  margin: 0;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.PollNode__optionCheckbox {
+  border: 0px;
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+.PollNode__optionDelete {
+  position: relative;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  margin-left: 6px;
+  border: 0px;
+  background-color: transparent;
+  background-position: 6px 6px;
+  background-repeat: no-repeat;
+  z-index: 0;
+  cursor: pointer;
+  border-radius: 5px;
+  opacity: 0.3;
+}
+.PollNode__optionDelete:before,
+.PollNode__optionDelete:after {
+  position: absolute;
+  display: block;
+  content: '';
+  background-color: #999;
+  width: 2px;
+  height: 15px;
+  top: 6px;
+  left: 13px;
+}
+.PollNode__optionDelete:before {
+  transform: rotate(-45deg);
+}
+.PollNode__optionDelete:after {
+  transform: rotate(45deg);
+}
+.PollNode__optionDelete:hover {
+  opacity: 1;
+  background-color: #eee;
+}
+.PollNode__optionDeleteDisabled {
+  cursor: not-allowed;
+}
+.PollNode__optionDeleteDisabled:hover {
+  opacity: 0.3;
+  background-color: transparent;
+}
+.PollNode__footer {
+  display: flex;
+  justify-content: center;
+}
+
+.StickyNode__contentEditable {
+  min-height: 20px;
+  border: 0;
+  resize: none;
+  cursor: text;
+  font-size: 24px;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  outline: 0;
+  padding: 10px;
+  user-select: text;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.StickyNode__placeholder {
+  font-size: 24px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 30px;
+  left: 20px;
+  width: 120px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.code-action-menu-container .prettier-wrapper {
+  position: relative;
+}
+
+.code-action-menu-container .prettier-wrapper .code-error-tips {
+  padding: 5px;
+  border-radius: 4px;
+  color: #fff;
+  background: #222;
+  margin-top: 4px;
+  position: absolute;
+  top: 26px;
+  right: 0;
+}
+
+.code-action-menu-container {
+  height: 35.8px;
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  user-select: none;
+}
+
+.code-action-menu-container .code-highlight-language {
+  margin-right: 4px;
+}
+
+.code-action-menu-container button.menu-item {
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 4px;
+  background: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.5);
+  text-transform: uppercase;
+}
+
+.code-action-menu-container button.menu-item i.format {
+  height: 16px;
+  width: 16px;
+  opacity: 0.6;
+  display: flex;
+  color: rgba(0, 0, 0, 0.5);
+  background-size: contain;
+}
+
+.code-action-menu-container button.menu-item:hover {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  opacity: 0.9;
+}
+
+.code-action-menu-container button.menu-item:active {
+  background-color: rgba(223, 232, 250);
+  border: 1px solid rgba(0, 0, 0, 0.45);
+}
+
+.Collapsible__container {
+  background: #fcfcfc;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  margin-bottom: 8px;
+}
+
+.Collapsible__title {
+  cursor: pointer;
+  padding: 5px 5px 5px 20px;
+  position: relative;
+  font-weight: bold;
+  list-style: none;
+  outline: none;
+}
+
+.Collapsible__title::marker,
+.Collapsible__title::-webkit-details-marker {
+  display: none;
+}
+
+.Collapsible__title:before {
+  border-style: solid;
+  border-color: transparent;
+  border-width: 4px 6px 4px 6px;
+  border-left-color: #000;
+  display: block;
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.Collapsible__container[open] > .Collapsible__title:before {
+  border-color: transparent;
+  border-width: 6px 4px 0 4px;
+  border-top-color: #000;
+}
+
+.Collapsible__content {
+  padding: 0 5px 5px 20px;
+}
+
+.Collapsible__collapsed .Collapsible__content {
+  display: none;
+  user-select: none;
+}
+
+.draggable-block-menu {
+  border-radius: 4px;
+  padding: 2px 1px;
+  cursor: grab;
+  opacity: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
+}
+
+.draggable-block-menu .icon {
+  width: 16px;
+  height: 16px;
+  opacity: 0.3;
+  background-image: url('https://cdn-s3.phx.asia/library/book-copy/06-02-2026/b7cdf4bb-0917-45bb-b266-bfef51969336-draggable-block-menu.png');
+}
+
+.draggable-block-menu:active {
+  cursor: grabbing;
+}
+
+.draggable-block-menu:hover {
+  background-color: #efefef;
+}
+
+.draggable-block-target-line {
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
+}
+
+.link-editor {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  max-width: 400px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 0 0 8px 8px;
+  transition: opacity 0.5s;
+  will-change: transform;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}
+
+.floating-text-format-popup {
+  display: flex;
+  background: #fff;
+  padding: 4px;
+  vertical-align: middle;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  opacity: 0;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+  height: 35px;
+  will-change: transform;
+}
+
+.floating-text-format-popup button.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.floating-text-format-popup button.popup-item:disabled {
+  cursor: not-allowed;
+}
+
+.floating-text-format-popup button.popup-item.spaced {
+  margin-right: 2px;
+}
+
+.floating-text-format-popup button.popup-item i.format {
+  background-size: contain;
+  height: 18px;
+  width: 18px;
+  margin-top: 2px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.floating-text-format-popup button.popup-item:disabled i.format {
+  opacity: 0.2;
+}
+
+.floating-text-format-popup button.popup-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.floating-text-format-popup button.popup-item.active i {
+  opacity: 1;
+}
+
+.floating-text-format-popup .popup-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.floating-text-format-popup select.popup-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.floating-text-format-popup select.code-language {
+  text-transform: capitalize;
+  width: 130px;
+}
+
+.floating-text-format-popup .popup-item .text {
+  display: flex;
+  line-height: 20px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  width: 70px;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.floating-text-format-popup .popup-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.floating-text-format-popup i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.floating-text-format-popup i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+.floating-text-format-popup .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+@media (max-width: 1024px) {
+  .floating-text-format-popup button.insert-comment {
+    display: none;
+  }
+}
+
+.TableCellResizer__resizer {
+  position: absolute;
+}
+
+.table-of-contents .heading2 {
+  margin-left: 10px;
+}
+
+.table-of-contents .heading3 {
+  margin-left: 20px;
+}
+
+.selected-heading {
+  color: #3578e5;
+  position: relative;
+}
+
+.selected-heading-wrapper::before {
+  content: ' ';
+  position: absolute;
+  display: inline-block;
+  left: -30px;
+  top: 4px;
+  z-index: 10;
+  height: 4px;
+  width: 4px;
+  background-color: #3578e5;
+  border: solid 4px white;
+  border-radius: 50%;
+}
+
+.normal-heading {
+  cursor: pointer;
+  line-height: 20px;
+  font-size: 16px;
+}
+
+.table-of-contents {
+  color: #65676b;
+  position: fixed;
+  top: 200px;
+  right: -35px;
+  padding: 10px;
+  width: 250px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  z-index: 1;
+  height: 300px;
+}
+
+.first-heading {
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.headings {
+  list-style: none;
+  margin-top: 0;
+  margin-left: 10px;
+  padding: 0;
+  overflow: scroll;
+  width: 200px;
+  height: 220px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.headings::-webkit-scrollbar {
+  display: none;
+}
+
+.headings::before {
+  content: ' ';
+  position: absolute;
+  height: 220px;
+  width: 4px;
+  right: 240px;
+  margin-top: 5px;
+  background-color: #ccd0d5;
+  border-radius: 2px;
+}
+
+.normal-heading-wrapper {
+  margin-left: 32px;
+  position: relative;
+}
+
+.CommentEditorTheme__paragraph {
+  margin: 0;
+  position: relative;
+}
+
+.PlaygroundEditorTheme__ltr {
+  text-align: left;
+}
+.PlaygroundEditorTheme__rtl {
+  text-align: right;
+}
+
+.PlaygroundEditorTheme__quote {
+  margin: 0;
+  margin-left: 20px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
+}
+.PlaygroundEditorTheme__h1 {
+  font-size: 34px;
+  margin-bottom: 10px;
+}
+.PlaygroundEditorTheme__h2 {
+  font-size: 29px;
+  margin-bottom: 10px;
+}
+.PlaygroundEditorTheme__h3 {
+  font-size: 24px;
+  margin-bottom: 10px;
+}
+.PlaygroundEditorTheme__h4 {
+  font-size: 21px;
+  margin-bottom: 10px;
+}
+.PlaygroundEditorTheme__h5 {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+.PlaygroundEditorTheme__h6 {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+.PlaygroundEditorTheme__indent {
+  --lexical-indent-base-value: 40px;
+}
+.PlaygroundEditorTheme__textBold {
+  font-weight: bold;
+}
+.PlaygroundEditorTheme__textItalic {
+  font-style: italic;
+}
+.PlaygroundEditorTheme__textUnderline {
+  text-decoration: underline;
+}
+.PlaygroundEditorTheme__textStrikethrough {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__textUnderlineStrikethrough {
+  text-decoration: underline line-through;
+}
+.PlaygroundEditorTheme__textSubscript {
+  font-size: 0.8em;
+  vertical-align: sub !important;
+}
+.PlaygroundEditorTheme__textSuperscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+.PlaygroundEditorTheme__textCode {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+.PlaygroundEditorTheme__hashtag {
+  background-color: rgba(88, 144, 255, 0.15);
+  border-bottom: 1px solid rgba(88, 144, 255, 0.3);
+}
+.PlaygroundEditorTheme__link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+.PlaygroundEditorTheme__link:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__code {
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  overflow-x: auto;
+  position: relative;
+  tab-size: 2;
+}
+.PlaygroundEditorTheme__code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #eee;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.PlaygroundEditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: max-content;
+  margin: 30px 0;
+}
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
+.PlaygroundEditorTheme__tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__tableCell {
+  border: 1px solid #bbb;
+  width: 75px;
+  min-width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+}
+.PlaygroundEditorTheme__tableCellSortedIndicator {
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background-color: #999;
+}
+.PlaygroundEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+.PlaygroundEditorTheme__tableCellSelected {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableCellPrimarySelected {
+  border: 2px solid rgb(60, 132, 244);
+  display: block;
+  height: calc(100% - 2px);
+  position: absolute;
+  width: calc(100% - 2px);
+  left: -1px;
+  top: -1px;
+  z-index: 2;
+}
+.PlaygroundEditorTheme__tableCellEditing {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+}
+.PlaygroundEditorTheme__tableAddColumns {
+  position: absolute;
+  top: 0;
+  width: 20px;
+  background-color: #eee;
+  height: 100%;
+  right: -25px;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddColumns:after {
+  background-image: url('/icons/plus.svg');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddColumns:hover {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableAddRows {
+  position: absolute;
+  bottom: -25px;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  height: 20px;
+  left: 0;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddRows:after {
+  background-image: url(/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PlaygroundEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.PlaygroundEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}
+.PlaygroundEditorTheme__characterLimit {
+  display: inline;
+  background-color: #ffbbbb !important;
+}
+.PlaygroundEditorTheme__ol1 {
+  padding: 0;
+  margin: 0;
+  list-style-position: inside;
+  list-style-type: decimal;
+  margin-left: 20px;
+}
+.PlaygroundEditorTheme__ol2 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-alpha;
+  list-style-position: inside;
+  margin-left: 20px;
+}
+.PlaygroundEditorTheme__ol3 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-alpha;
+  list-style-position: inside;
+  margin-left: 20px;
+}
+.PlaygroundEditorTheme__ol4 {
+  padding: 0;
+  margin: 0;
+  list-style-type: upper-roman;
+  list-style-position: inside;
+  margin-left: 20px;
+}
+.PlaygroundEditorTheme__ol5 {
+  padding: 0;
+  margin: 0;
+  list-style-type: lower-roman;
+  list-style-position: inside;
+  margin-left: 20px;
+}
+.PlaygroundEditorTheme__ul {
+  padding: 0;
+  margin: 0;
+  list-style: disc;
+  margin-left: 20px;
+  list-style-position: inside;
+}
+
+.PlaygroundEditorTheme__listItemChecked,
+.PlaygroundEditorTheme__listItemUnchecked {
+  position: relative;
+  margin-left: 8px;
+  margin-right: 8px;
+  padding-left: 24px;
+  padding-right: 24px;
+  list-style-type: none;
+  outline: none;
+}
+.PlaygroundEditorTheme__listItemChecked {
+  text-decoration: line-through;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before,
+.PlaygroundEditorTheme__listItemChecked:before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  top: 2px;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+.PlaygroundEditorTheme__listItemUnchecked[dir='rtl']:before,
+.PlaygroundEditorTheme__listItemChecked[dir='rtl']:before {
+  left: auto;
+  right: 0;
+}
+.PlaygroundEditorTheme__listItemUnchecked:focus:before,
+.PlaygroundEditorTheme__listItemChecked:focus:before {
+  box-shadow: 0 0 0 2px #a6cdfe;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemUnchecked:before {
+  border: 1px solid #999;
+  border-radius: 2px;
+}
+.PlaygroundEditorTheme__listItemChecked:before {
+  border: 1px solid rgb(61, 135, 245);
+  border-radius: 2px;
+  background-color: #3d87f5;
+  background-repeat: no-repeat;
+}
+.PlaygroundEditorTheme__listItemChecked:after {
+  content: '';
+  cursor: pointer;
+  border-color: #fff;
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: 6px;
+  width: 3px;
+  left: 7px;
+  right: 7px;
+  height: 6px;
+  transform: rotate(45deg);
+  border-width: 0 2px 2px 0;
+}
+.PlaygroundEditorTheme__nestedListItem {
+  list-style-type: none;
+}
+.PlaygroundEditorTheme__nestedListItem:before,
+.PlaygroundEditorTheme__nestedListItem:after {
+  display: none;
+}
+.PlaygroundEditorTheme__tokenComment {
+  color: slategray;
+}
+.PlaygroundEditorTheme__tokenPunctuation {
+  color: #999;
+}
+.PlaygroundEditorTheme__tokenProperty {
+  color: #905;
+}
+.PlaygroundEditorTheme__tokenSelector {
+  color: #690;
+}
+.PlaygroundEditorTheme__tokenOperator {
+  color: #9a6e3a;
+}
+.PlaygroundEditorTheme__tokenAttr {
+  color: #07a;
+}
+.PlaygroundEditorTheme__tokenVariable {
+  color: #e90;
+}
+.PlaygroundEditorTheme__tokenFunction {
+  color: #dd4a68;
+}
+.PlaygroundEditorTheme__mark {
+  background: rgba(255, 212, 0, 0.14);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
+  padding-bottom: 2px;
+}
+.PlaygroundEditorTheme__markOverlap {
+  background: rgba(255, 212, 0, 0.3);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__mark.selected {
+  background: rgba(255, 212, 0, 0.5);
+  border-bottom: 2px solid rgba(255, 212, 0, 1);
+}
+.PlaygroundEditorTheme__markOverlap.selected {
+  background: rgba(255, 212, 0, 0.7);
+  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
+}
+.PlaygroundEditorTheme__embedBlock {
+  user-select: none;
+}
+.PlaygroundEditorTheme__embedBlockFocus {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__layoutContaner {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
+
+.editor-image img {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 90% !important;
+  border: 1px solid #e5e7eb;
+  margin-bottom: 10px;
+}
+
+.StickyEditorTheme__paragraph {
+  margin: 0;
+  position: relative;
+}
+
+.Button__root {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: 0px;
+  background-color: #eee;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.Button__root:hover {
+  background-color: #ddd;
+}
+.Button__small {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 13px;
+}
+.Button__disabled {
+  cursor: not-allowed;
+}
+.Button__disabled:hover {
+  background-color: #eee;
+}
+
+[type='checkbox']:checked,
+[type='checkbox']:not(:checked) {
+  position: absolute;
+  left: -9999px;
+}
+
+[type='checkbox']:checked + label,
+[type='checkbox']:not(:checked) + label {
+  position: relative;
+  padding-right: 55px;
+  cursor: pointer;
+  line-height: 20px;
+  display: inline-block;
+  color: #666;
+}
+
+[type='checkbox']:checked + label:before,
+[type='checkbox']:not(:checked) + label:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #666;
+  background: #fff;
+}
+
+[type='checkbox']:checked + label:after,
+[type='checkbox']:not(:checked) + label:after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: #222222;
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  -webkit-transition: all 0.2s ease;
+  transition: all 0.2s ease;
+}
+
+[type='checkbox']:not(:checked) + label:after {
+  opacity: 0;
+  -webkit-transform: scale(0);
+  transform: scale(0);
+}
+
+[type='checkbox']:checked + label:after {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+
+.color-picker-wrapper {
+  padding: 20px;
+}
+
+.color-picker-basic-color {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.color-picker-basic-color button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+  list-style-type: none;
+}
+
+.color-picker-basic-color button.active {
+  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.color-picker-saturation {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 150px;
+  background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);
+  user-select: none;
+}
+.color-picker-saturation_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 15px #00000026;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
+}
+.color-picker-hue {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 12px;
+  background-image: linear-gradient(
+    to right,
+    rgb(255, 0, 0),
+    rgb(255, 255, 0),
+    rgb(0, 255, 0),
+    rgb(0, 255, 255),
+    rgb(0, 0, 255),
+    rgb(255, 0, 255),
+    rgb(255, 0, 0)
+  );
+  user-select: none;
+  border-radius: 12px;
+}
+
+.color-picker-hue_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: #0003 0 0 0 0.5px;
+  box-sizing: border-box;
+  transform: translate(-10px, -4px);
+}
+
+.color-picker-color {
+  border: 1px solid #ccc;
+  margin-top: 15px;
+  width: 100%;
+  height: 20px;
+}
+
+.ContentEditable__root {
+  border: 0;
+  font-size: 16px;
+  display: block;
+  position: relative;
+  outline: 0;
+  padding: 8px 28px 40px;
+  min-height: 150px;
+}
+@media (max-width: 1025px) {
+  .ContentEditable__root {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+.DialogActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.DialogButtonsList {
+  display: flex;
+  flex-direction: column;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.DialogButtonsList button {
+  margin-bottom: 20px;
+}
+
+.EquationEditor_inlineEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+}
+
+.EquationEditor_blockEditor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  resize: none;
+  width: 100%;
+}
+
+.EquationEditor_inputBackground {
+  background-color: #eee;
+}
+
+.EquationEditor_dollarSign {
+  text-align: left;
+  color: #b0b0b0;
+}
+
+.Input__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.Input__label {
+  display: flex;
+  flex: 1;
+  color: #666;
+}
+.Input__input {
+  display: flex;
+  flex: 2;
+  border: 1px solid #999;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 16px;
+  border-radius: 5px;
+  min-width: 0;
+}
+
+.KatexEquationAlterer_defaultRow {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_dialogActions {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  margin-top: 20px;
+  margin-bottom: 0;
+  justify-content: right;
+}
+
+.KatexEquationAlterer_centerRow {
+  display: flex;
+  flex-direction: row;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.KatexEquationAlterer_textArea {
+  width: 100%;
+  resize: none;
+  padding: 7px;
+}
+
+.Modal__overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  flex-direction: column;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  background-color: rgba(40, 40, 40, 0.6);
+  flex-grow: 0;
+  flex-shrink: 1;
+  z-index: 100;
+}
+.Modal__modal {
+  padding: 20px;
+  min-height: 100px;
+  min-width: 300px;
+  display: flex;
+  flex-grow: 0;
+  background-color: #fff;
+  flex-direction: column;
+  position: relative;
+  box-shadow: 0 0 20px 0 #444;
+  border-radius: 10px;
+}
+.Modal__title {
+  color: #444;
+  margin: 0px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ccc;
+}
+.Modal__closeButton {
+  border: 0px;
+  position: absolute;
+  right: 20px;
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #eee;
+}
+.Modal__closeButton:hover {
+  background-color: #ddd;
+}
+.Modal__content {
+  padding-top: 20px;
+}
+
+.Placeholder__root {
+  font-size: 15px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 8px;
+  left: 28px;
+  right: 28px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+@media (max-width: 1025px) {
+  .Placeholder__root {
+    left: 8px;
+  }
+}
+
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0 1em 0 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  cursor: inherit;
+  line-height: inherit;
+
+  z-index: 1;
+  outline: none;
+}
+
+:root {
+  --select-border: #393939;
+  --select-focus: #101484;
+  --select-arrow: var(--select-border);
+}
+
+.select {
+  min-width: 160px;
+  max-width: 290px;
+  border: 1px solid var(--select-border);
+  border-radius: 0.25em;
+  padding: 0.25em 0.5em;
+  font-size: 1rem;
+  cursor: pointer;
+  line-height: 1.4;
+  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+}
+
+
+`));
 }
 //# sourceMappingURL=style.js.map