@zzish/math-rich-input 0.1.49 → 0.1.51

package/dist/index.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 function _callSuper(t, o, e) {
   return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
@@ -19311,31 +19313,50 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       console.log("🔍 Focusing equation editor...");
       if (_this.equationEditor) {
         console.log("🔍 EquationEditor ref found");
-        if (_this.state.useExpertMode) {
-          // Focus textarea in expert mode
-          console.log("🔍 Expert mode - focusing latexInput");
-          if (_this.equationEditor.latexInput) {
-            _this.equationEditor.latexInput.focus();
-            console.log("✅ LatexInput focused");
-          } else {
-            console.log("❌ LatexInput not found");
-          }
-        } else {
-          // Focus MathQuill in normal mode
-          console.log("🔍 Normal mode - focusing mathQuill");
-          if (_this.equationEditor.mathQuill) {
-            _this.equationEditor.mathQuill.focus();
-            console.log("✅ MathQuill focused");
+
+        // Prevent scroll jumping during focus
+        var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        try {
+          if (_this.state.useExpertMode) {
+            // Focus textarea in expert mode
+            console.log("🔍 Expert mode - focusing latexInput");
+            if (_this.equationEditor.latexInput) {
+              // Use preventScroll option if available
+              _this.equationEditor.latexInput.focus({
+                preventScroll: true
+              });
+              console.log("✅ LatexInput focused");
+            } else {
+              console.log("❌ LatexInput not found");
+            }
           } else {
-            console.log("❌ MathQuill not found");
+            // Focus MathQuill in normal mode
+            console.log("🔍 Normal mode - focusing mathQuill");
+            if (_this.equationEditor.mathQuill) {
+              _this.equationEditor.mathQuill.focus();
+              console.log("✅ MathQuill focused");
+            } else {
+              console.log("❌ MathQuill not found");
+            }
           }
+        } catch (error) {
+          console.warn("🔍 Focus failed:", error);
         }
+
+        // Ensure scroll position hasn't changed
+        setTimeout(function () {
+          var newScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+          if (newScrollTop !== currentScrollTop) {
+            window.scrollTo(0, currentScrollTop);
+          }
+        }, 10);
       } else {
         console.log("❌ EquationEditor ref not found");
       }
     });
     _this.state = {
-      useExpertMode: GLOBAL_lastSelectedExpertMode
+      useExpertMode: GLOBAL_lastSelectedExpertMode,
+      animationReady: false
     };
     _this.handleCloseCallback = props.handleClose;
     _this.handleInsertCallback = props.handleInsert;
@@ -19346,20 +19367,117 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      // Auto-focus when modal opens
-      // Use setTimeout to ensure child components are fully mounted
-      setTimeout(function () {
-        _this2.focusEquationEditor();
-      }, 100);
+      // Store current scroll position to prevent jumping
+      this.originalScrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      // Create portal container if it doesn't exist
+      this.ensurePortalContainer();
+
+      // Lock body scroll to prevent jumping in transform containers
+      this.lockBodyScroll();
+
+      // Enable animation after portal is ready (ensures smooth slide-in)
+      // Need multiple RAF frames for proper CSS animation timing
+      requestAnimationFrame(function () {
+        requestAnimationFrame(function () {
+          _this2.setState({
+            animationReady: true
+          }, function () {
+            // Auto-focus after animation completes (0.3s CSS animation + buffer)
+            setTimeout(function () {
+              _this2.focusEquationEditor();
+            }, 400); // Wait for animation to complete
+          });
+        });
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this3 = this;
+      // Hide portal immediately to prevent flash
+      if (this.portalContainer) {
+        this.portalContainer.style.visibility = "hidden";
+      }
+
+      // Unlock body scroll and restore original scroll position
+      this.unlockBodyScroll();
+
+      // Clean up portal container after a small delay
+      if (this.createdPortalContainer && this.portalContainer) {
+        setTimeout(function () {
+          if (_this3.portalContainer && _this3.portalContainer.parentNode) {
+            document.body.removeChild(_this3.portalContainer);
+          }
+        }, 100);
+      }
+    }
+  }, {
+    key: "lockBodyScroll",
+    value: function lockBodyScroll() {
+      // Store original overflow styles and scroll position
+      this.originalBodyOverflow = document.body.style.overflow;
+      this.originalDocumentOverflow = document.documentElement.style.overflow;
+      this.originalBodyPosition = document.body.style.position;
+      this.originalBodyTop = document.body.style.top;
+      this.originalBodyWidth = document.body.style.width;
+
+      // Get current scroll position
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+      // Apply position: fixed to prevent scrolling while preserving position
+      document.body.style.position = "fixed";
+      document.body.style.top = "-".concat(scrollTop, "px");
+      document.body.style.width = "100%";
+      document.body.style.overflow = "hidden";
+    }
+  }, {
+    key: "unlockBodyScroll",
+    value: function unlockBodyScroll() {
+      // Get the scroll position from the fixed top value
+      var scrollTop = Math.abs(parseInt(document.body.style.top) || 0);
+
+      // Restore original styles
+      document.body.style.position = this.originalBodyPosition || "";
+      document.body.style.top = this.originalBodyTop || "";
+      document.body.style.width = this.originalBodyWidth || "";
+      document.body.style.overflow = this.originalBodyOverflow || "";
+      document.documentElement.style.overflow = this.originalDocumentOverflow || "";
+
+      // Restore scroll position smoothly
+      if (scrollTop > 0) {
+        window.scrollTo(0, scrollTop);
+      }
+    }
+  }, {
+    key: "ensurePortalContainer",
+    value: function ensurePortalContainer() {
+      // Look for existing portal container
+      this.portalContainer = document.getElementById("math-rich-input-modal-portal");
+      if (!this.portalContainer) {
+        // Create new portal container
+        this.portalContainer = document.createElement("div");
+        this.portalContainer.id = "math-rich-input-modal-portal";
+        // Portal container should not interfere with content positioning
+        // Start invisible until animation is ready
+        this.portalContainer.style.cssText = "position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999990; visibility: hidden;";
+        document.body.appendChild(this.portalContainer);
+        this.createdPortalContainer = true;
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this3 = this;
+      var _this4 = this;
+      // Show portal container when animation is ready
+      if (!prevState.animationReady && this.state.animationReady && this.portalContainer) {
+        this.portalContainer.style.visibility = "visible";
+      }
+
       // Re-focus when expert mode changes
       if (prevState.useExpertMode !== this.state.useExpertMode) {
         setTimeout(function () {
-          _this3.focusEquationEditor();
+          _this4.focusEquationEditor();
         }, 100);
       }
     }
@@ -19379,16 +19497,27 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
       var useClass = "EquationEditorModal";
       if (this.isMobile()) useClass = "EquationEditorModal-mobile";
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "EquationEditorModal-background",
-        onClick: this.handleClose
+
+      // Add support for disabling animations (useful for Svelte transitions)
+      if (this.props.disableAnimation) {
+        useClass += " no-animation";
+      }
+      var modalContent = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "EquationEditorModal-background".concat(this.props.disableAnimation ? " no-animation" : ""),
+        onClick: this.handleClose,
+        style: {
+          pointerEvents: "auto"
+        }
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: useClass,
         ref: function ref(r) {
-          return _this4.modalDiv = r;
+          return _this5.modalDiv = r;
+        },
+        style: {
+          pointerEvents: "auto"
         }
       }, !this.isMobile() && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "title"
@@ -19399,23 +19528,31 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React__default["default"].createElement("input", {
         type: "checkbox",
         ref: function ref(r) {
-          return _this4.expertModeSwitch = r;
+          return _this5.expertModeSwitch = r;
         },
         onChange: function onChange(e) {
-          return _this4.handleExpertModeSwitchChange(e);
+          return _this5.handleExpertModeSwitchChange(e);
         },
         checked: this.state.useExpertMode
       }), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "slider round"
       })))), /*#__PURE__*/React__default["default"].createElement(EquationEditor, {
         ref: function ref(r) {
-          return _this4.equationEditor = r;
+          return _this5.equationEditor = r;
         },
         latex: this.props.latex,
         useExpertMode: this.state.useExpertMode,
         handleInsert: this.handleInsert,
         handleCancel: this.handleClose
       })));
+
+      // Use portal to render modal outside of parent container stacking context
+      if (this.portalContainer && this.state.animationReady) {
+        return /*#__PURE__*/ReactDOM__default["default"].createPortal(modalContent, this.portalContainer);
+      }
+
+      // Show nothing until portal and animation are ready (prevents flash)
+      return null;
     }
   }]);
 }(React__default["default"].Component);
@@ -24173,7 +24310,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         },
         handleClose: this.handleEquationEditorClose,
         handleInsert: this.handleEquationEditorInsert,
-        latex: this.state.equationEditorLatex
+        latex: this.state.equationEditorLatex,
+        disableAnimation: this.props.disableAnimation
       }));
     }
   }]);

package/dist/math-rich-input.css

@@ -1 +1 @@
-.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:.4s;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;-webkit-transition:.4s;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}
+.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;cursor:pointer;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{cursor:default;height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;cursor:text;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;cursor:text;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;margin:5px}.EquationEditor .cancelButton,.EquationEditor .insertButton{cursor:pointer;font-size:14px;height:36px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;margin-bottom:10px;margin-left:5px;margin-right:5px}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;cursor:default;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{cursor:default;display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;cursor:default;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s cubic-bezier(.2,0,.38,.9);animation-fill-mode:forwards;background:#000;height:100%;left:0;opacity:0;position:fixed;top:0;width:100%;z-index:999998}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s cubic-bezier(.2,0,.38,.9);animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;opacity:0;position:fixed;top:50%;transform:translate(-50%,100%);width:98%;z-index:999999}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal.no-animation{animation:none!important;opacity:1!important;transform:translate(-50%,-50%)!important}.EquationEditorModal-mobile.no-animation{animation:none!important;opacity:1!important;transform:translate(-50%,1px)!important}.EquationEditorModal-background.no-animation{animation:none!important;opacity:.6!important}.EquationEditorModal-mobile{animation:riseFromTop .3s cubic-bezier(.2,0,.38,.9);animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;opacity:0;position:fixed;top:0;transform:translate(-50%,-100%);width:99%;z-index:999999}@keyframes riseFromTop{00%{opacity:0;transform:translate(-50%,-100%)}to{opacity:1;transform:translate(-50%,1px)}}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:.4s;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;-webkit-transition:.4s;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}