@barocss/math-editor 0.2.0 → 0.4.0

package/src/style.css

@@ -6,18 +6,19 @@
   unicode-range: U+0030-0039, U+223C;
 }
 .me-editor {
-  --me-accent: #236957;
-  --me-line: #d9e1dd;
-  color: #202c27;
-  font-family: system-ui, sans-serif;
+  color: var(--me-text, #202c27);
+  font-family: var(--me-ui-font-family, system-ui, sans-serif);
+  background: var(--me-background, transparent);
 }
 .me-tools {
+  color: var(--me-text, #202c27);
+  background: var(--me-toolbar-background, transparent);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 4px;
-  padding: 12px;
-  border-bottom: 1px solid var(--me-line);
+  gap: var(--me-toolbar-gap, 4px);
+  padding: var(--me-toolbar-padding, 12px);
+  border-bottom: 1px solid var(--me-line, #d9e1dd);
 }
 .me-tools button {
   display: flex;
@@ -25,33 +26,33 @@
   gap: 7px;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: var(--me-control-radius, 6px);
   padding: 7px 9px;
   color: inherit;
   cursor: pointer;
-  font: 12px system-ui;
+  font: 12px var(--me-ui-font-family, system-ui, sans-serif);
 }
 .me-tools button span {
   font: 20px 'Barocss Math Glyphs', Georgia, serif;
 }
 .me-tools button:hover {
-  background: #edf3ef;
+  background: var(--me-hover-background, #edf3ef);
 }
 .me-tools button:disabled {
   opacity: 0.35;
   cursor: default;
 }
 .me-tools button:focus-visible {
-  outline: 2px solid var(--me-accent);
+  outline: 2px solid var(--me-accent, #236957);
 }
 .me-divider {
   height: 20px;
-  border-left: 1px solid var(--me-line);
+  border-left: 1px solid var(--me-line, #d9e1dd);
   margin: 0 6px;
 }
 .me-surface {
-  min-height: 190px;
-  padding: 48px 32px;
+  min-height: var(--me-surface-min-height, 190px);
+  padding: var(--me-surface-padding, 48px 32px);
   display: flex;
   align-items: center;
   overflow-x: auto;
@@ -82,8 +83,8 @@
   outline: none;
 }
 .me-input:focus {
-  background: #e7f2ed;
-  box-shadow: 0 2px 0 var(--me-accent);
+  background: var(--me-active-background, #e7f2ed);
+  box-shadow: 0 2px 0 var(--me-accent, #236957);
 }
 .me-input::placeholder {
   color: #aabbb1;
@@ -137,10 +138,10 @@
   left: 0;
   min-width: 180px;
   padding: 5px;
-  border: 1px solid var(--me-line);
+  border: 1px solid var(--me-line, #d9e1dd);
   border-radius: 8px;
-  background: white;
-  box-shadow: 0 8px 24px #172c2420;
+  background: var(--me-panel-background, white);
+  box-shadow: var(--me-menu-shadow, 0 8px 24px #172c2420);
   display: flex;
   flex-direction: column;
 }
@@ -149,18 +150,19 @@
   justify-content: space-between;
   gap: 20px;
   border: 0;
-  background: white;
+  background: var(--me-panel-background, white);
   padding: 9px;
   text-align: left;
-  color: #202c27;
-  border-radius: 4px;
+  color: var(--me-text, #202c27);
+  border-radius: var(--me-control-radius, 4px);
+  font: inherit;
   cursor: pointer;
 }
 .me-suggestions button[aria-selected='true'] {
-  background: #e7f2ed;
+  background: var(--me-active-background, #e7f2ed);
 }
 .me-suggestions small {
-  color: #6a7b72;
+  color: var(--me-muted, #6a7b72);
 }
 
 /* The hidden twin uses browser font shaping, including CJK fallback fonts and IME drafts.
@@ -193,36 +195,52 @@
   padding-inline: 1px;
 }
 .me-empty-boundary .me-input {
-  border: 1px dashed var(--me-line);
+  border: 1px dashed var(--me-line, #d9e1dd);
 }
 .me-suggestion-panel {
   position: fixed;
-  z-index: 1000;
+  z-index: var(--me-menu-z-index, 1000);
   display: flex;
   flex-direction: column;
   width: min(336px, calc(100vw - 16px));
-  background: #fff;
-  color: #202c27;
-  border: 1px solid #d9e1dd;
-  border-radius: 10px;
-  box-shadow: 0 12px 32px #172c2426;
-  font: 13px/1.4 system-ui, sans-serif;
+  background: var(--me-panel-background, #fff);
+  color: var(--me-text, #202c27);
+  border: 1px solid var(--me-line, #d9e1dd);
+  border-radius: var(--me-radius, 10px);
+  box-shadow: var(--me-menu-shadow, 0 12px 32px #172c2426);
+  font: 13px/1.4 var(--me-ui-font-family, system-ui, sans-serif);
+  /* A menu can live inside a centered or formatted host document. */
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  letter-spacing: normal;
+  word-spacing: normal;
+  white-space: normal;
   overflow: hidden;
 }
 .me-suggestion-heading,
 .me-suggestion-footer {
   padding: 10px 12px;
   font-size: 11px;
-  color: #708075;
+  color: var(--me-muted, #708075);
   flex-shrink: 0;
 }
 .me-suggestion-heading {
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
-  border-bottom: 1px solid #edf0eb;
+  gap: 4px 12px;
+  border-bottom: 1px solid var(--me-line, #edf0eb);
+}
+.me-suggestion-query {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .me-suggestion-footer {
-  border-top: 1px solid #edf0eb;
+  border-top: 1px solid var(--me-line, #edf0eb);
 }
 .me-suggestion-panel .me-suggestions {
   position: static;
@@ -244,8 +262,13 @@
 .me-candidate-glyph {
   font: 26px 'Barocss Math Glyphs', Georgia, serif;
   min-width: 42px;
+  flex-shrink: 0;
   text-align: center;
 }
+.me-candidate-copy {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .me-suggestions strong {
   display: block;
   font-size: 13px;
@@ -277,63 +300,63 @@
 
 /* Slot roles are presentation metadata, not a claim that text is a variable or constant. */
 .me-row {
-  --me-ink: #2358a0;
+  --me-ink: var(--me-variable, #2358a0);
   --me-tint: #eff5ff;
   --me-focus: #dbeaff;
-  --me-ring: #3676d3;
+  --me-ring: var(--me-focus-color, #3676d3);
 }
 .me-row[data-math-role='numerator'],
 .me-row[data-math-role='base'] {
-  --me-ink: #2358a0;
+  --me-ink: var(--me-variable, #2358a0);
   --me-tint: #eff5ff;
   --me-focus: #dbeaff;
-  --me-ring: #3676d3;
+  --me-ring: var(--me-focus-color, #3676d3);
 }
 .me-row[data-math-role='denominator'],
 .me-row[data-math-role='radicand'] {
-  --me-ink: #086b60;
+  --me-ink: var(--me-variable, #086b60);
   --me-tint: #eaf7f1;
   --me-focus: #cef0e4;
-  --me-ring: #138777;
+  --me-ring: var(--me-focus-color, #138777);
 }
 .me-row[data-math-role='exponent'],
 .me-row[data-math-role='upper'] {
-  --me-ink: #88430b;
+  --me-ink: var(--me-variable, #88430b);
   --me-tint: #fff4e5;
   --me-focus: #ffe2b4;
-  --me-ring: #bd6a18;
+  --me-ring: var(--me-focus-color, #bd6a18);
 }
 .me-row[data-math-role='index'],
 .me-row[data-math-role='lower'] {
-  --me-ink: #7c3d90;
+  --me-ink: var(--me-variable, #7c3d90);
   --me-tint: #f8eefb;
   --me-focus: #edd7f6;
-  --me-ring: #9d50b1;
+  --me-ring: var(--me-focus-color, #9d50b1);
 }
 .me-row[data-math-role='group'] {
-  --me-ink: #4e53a4;
+  --me-ink: var(--me-variable, #4e53a4);
   --me-tint: #f1f0ff;
   --me-focus: #e1dfff;
-  --me-ring: #726ad0;
+  --me-ring: var(--me-focus-color, #726ad0);
 }
 .me-input {
   color: var(--me-ink);
-  background: var(--me-tint);
+  background: var(--me-input-background, var(--me-tint));
   border-radius: 4px;
   caret-color: var(--me-ink);
 }
 .me-input:hover:not(:focus) {
-  background: var(--me-focus);
+  background: var(--me-input-focus-background, var(--me-focus));
   box-shadow: none;
 }
 .me-input:focus {
-  background: var(--me-focus);
+  background: var(--me-input-focus-background, var(--me-focus));
   outline: none;
   box-shadow: none;
 }
 .me-input::selection {
-  color: white;
-  background: var(--me-ring);
+  color: var(--me-selection-color, white);
+  background: var(--me-selection-background, var(--me-ring));
 }
 .me-input::placeholder {
   color: var(--me-ink);
@@ -344,7 +367,7 @@
   box-shadow: none;
 }
 .me-empty-boundary .me-input:hover:not(:focus) {
-  background: var(--me-focus);
+  background: var(--me-input-focus-background, var(--me-focus));
 }
 .me-empty-boundary .me-input:focus {
   border-color: transparent;
@@ -439,18 +462,18 @@
   flex-wrap: wrap;
   gap: 8px;
   padding: 10px 14px;
-  border-bottom: 1px solid #dce2e8;
-  background: #f4f4fb;
-  font: 12px system-ui;
-  color: #4e53a4;
+  border-bottom: 1px solid var(--me-line, #dce2e8);
+  background: var(--me-subtle-background, #f4f4fb);
+  font: 12px var(--me-ui-font-family, system-ui, sans-serif);
+  color: var(--me-text, #4e53a4);
 }
 .me-matrix-tools button,
 .me-matrix-tools select {
   font: inherit;
   color: inherit;
-  background: white;
-  border: 1px solid #d6d5e6;
-  border-radius: 5px;
+  background: var(--me-panel-background, white);
+  border: 1px solid var(--me-line, #d6d5e6);
+  border-radius: var(--me-control-radius, 5px);
   padding: 6px 8px;
 }
 .me-matrix-tools button:disabled {
@@ -458,7 +481,7 @@
 }
 .me-matrix-tools small {
   font-size: 11px;
-  color: #77758b;
+  color: var(--me-muted, #77758b);
 }
 
 .me-matrix-size {
@@ -466,8 +489,8 @@
   font-size: 12px;
   color: inherit;
   background: transparent;
-  border: 1px solid #dcdfe2;
-  border-radius: 5px;
+  border: 1px solid var(--me-line, #dcdfe2);
+  border-radius: var(--me-control-radius, 5px);
   padding: 6px;
   max-width: 100%;
 }
@@ -476,7 +499,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 18px;
+  gap: var(--me-line-gap, 18px);
   min-width: 0;
 }
 .me-document-line {
@@ -503,14 +526,14 @@
   opacity: 0.65;
 }
 .me-run[data-token-kind='variable'] .me-input {
-  color: #245da1;
+  color: var(--me-variable, #245da1);
 }
 .me-run[data-token-kind='constant'] .me-input {
-  color: #a65316;
+  color: var(--me-number, #a65316);
   font-style: normal;
 }
 .me-run[data-token-kind='symbol'] .me-input {
-  color: #7853a6;
+  color: var(--me-symbol, #7853a6);
   font-style: normal;
 }
 .me-run[data-token-kind='constant'] .me-measure,
@@ -537,31 +560,31 @@
   align-items: center;
   gap: 14px;
   padding: 8px 16px;
-  border-bottom: 1px solid var(--me-line);
-  font: 11px system-ui;
-  color: #78857e;
+  border-bottom: 1px solid var(--me-line, #d9e1dd);
+  font: 11px var(--me-ui-font-family, system-ui, sans-serif);
+  color: var(--me-muted, #78857e);
 }
 .me-token-legend [data-kind='variable'] {
-  color: #245da1;
+  color: var(--me-variable, #245da1);
 }
 .me-token-legend [data-kind='constant'] {
-  color: #a65316;
+  color: var(--me-number, #a65316);
 }
 .me-token-legend [data-kind='symbol'] {
-  color: #7853a6;
+  color: var(--me-symbol, #7853a6);
 }
 
 .me-matrix[data-selected='true'] {
-  outline: 2px solid #245da1;
+  outline: 2px solid var(--me-variable, #245da1);
   outline-offset: 3px;
-  background: #245da112;
+  background: var(--me-selection-background, #245da112);
   border-radius: 3px;
 }
 .me-grid-selection-hint {
   padding: 8px 16px;
-  font: 12px system-ui;
-  color: #245da1;
-  background: #eef5ff;
+  font: 12px var(--me-ui-font-family, system-ui, sans-serif);
+  color: var(--me-variable, #245da1);
+  background: var(--me-selection-background, #eef5ff);
 }
 .me-preview-token {
   position: absolute;
@@ -578,17 +601,17 @@
   user-select: none;
 }
 .me-preview-token:hover {
-  background: var(--me-focus);
+  background: var(--me-input-focus-background, var(--me-focus));
 }
 .me-run[data-token-kind='variable'] .me-preview-token {
-  color: #245da1;
+  color: var(--me-variable, #245da1);
 }
 .me-run[data-token-kind='constant'] .me-preview-token {
-  color: #a65316;
+  color: var(--me-number, #a65316);
   font-style: normal;
 }
 .me-run[data-token-kind='symbol'] .me-preview-token {
-  color: #7853a6;
+  color: var(--me-symbol, #7853a6);
   font-style: normal;
 }
 .me-superscript > .me-slot:last-child .me-preview-token,
@@ -600,7 +623,7 @@
 }
 .me-range-highlight,
 .me-empty[data-range-selected='true'] {
-  background: #b9d8ff;
+  background: var(--me-selection-background, #b9d8ff);
   color: inherit;
   border-radius: 2px;
 }
@@ -608,7 +631,7 @@
   outline: none;
 }
 .me-surface:focus-visible {
-  outline: 2px solid #3676d3;
+  outline: 2px solid var(--me-focus-color, #3676d3);
   outline-offset: -2px;
 }
 .me-line-number {
@@ -616,17 +639,17 @@
   margin-right: 16px;
   text-align: right;
   align-self: center;
-  color: #8a9790;
-  font: 11px/1.5 system-ui;
+  color: var(--me-muted, #8a9790);
+  font: 11px/1.5 var(--me-ui-font-family, system-ui, sans-serif);
   font-variant-numeric: tabular-nums;
   user-select: none;
   cursor: default;
 }
 .me-symbol-browser {
   padding: 16px;
-  border-bottom: 1px solid var(--me-line);
-  background: #f6f8f6;
-  font: 12px/1.5 system-ui;
+  border-bottom: 1px solid var(--me-line, #d9e1dd);
+  background: var(--me-subtle-background, #f6f8f6);
+  font: 12px/1.5 var(--me-ui-font-family, system-ui, sans-serif);
 }
 .me-symbol-browser-heading {
   display: flex;
@@ -636,15 +659,15 @@
 }
 .me-symbol-browser-heading small {
   font-weight: 400;
-  color: #6a7b72;
+  color: var(--me-muted, #6a7b72);
   margin-left: 8px;
 }
 .me-symbol-browser-heading button {
   font: inherit;
-  background: white;
+  background: var(--me-panel-background, white);
   color: inherit;
-  border: 1px solid var(--me-line);
-  border-radius: 5px;
+  border: 1px solid var(--me-line, #d9e1dd);
+  border-radius: var(--me-control-radius, 5px);
   padding: 5px 10px;
   cursor: pointer;
 }
@@ -656,15 +679,15 @@
 }
 .me-symbol-search input {
   font: inherit;
-  border: 1px solid var(--me-line);
-  border-radius: 5px;
+  border: 1px solid var(--me-line, #d9e1dd);
+  border-radius: var(--me-control-radius, 5px);
   padding: 9px 10px;
   min-width: 0;
-  background: white;
+  background: var(--me-panel-background, white);
   color: inherit;
 }
 .me-symbol-help {
-  color: #627469;
+  color: var(--me-muted, #627469);
   margin: 8px 0 12px;
 }
 .me-symbol-grid {
@@ -683,24 +706,24 @@
   gap: 5px;
   min-height: 74px;
   padding: 8px 5px;
-  border: 1px solid var(--me-line);
-  border-radius: 6px;
-  background: white;
+  border: 1px solid var(--me-line, #d9e1dd);
+  border-radius: var(--me-control-radius, 6px);
+  background: var(--me-panel-background, white);
   color: inherit;
-  font: 11px/1.3 system-ui;
+  font: 11px/1.3 var(--me-ui-font-family, system-ui, sans-serif);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
 .me-symbol-grid button:hover {
-  background: #e7f2ed;
-  border-color: #9cbbac;
+  background: var(--me-active-background, #e7f2ed);
+  border-color: var(--me-accent, #9cbbac);
 }
 .me-symbol-glyph {
   font: 25px/1.2 'Barocss Math Glyphs', Georgia, 'Times New Roman', serif;
 }
 .me-symbol-browser button:focus-visible,
 .me-symbol-search input:focus-visible {
-  outline: 2px solid var(--me-accent);
+  outline: 2px solid var(--me-accent, #236957);
   outline-offset: 2px;
 }
 
@@ -725,28 +748,22 @@
   color: var(--me-symbol, #7650b2);
 }
 .me-dom-editor .me-dom-selected {
-  background: #dbeafe;
+  background: var(--me-selection-background, #dbeafe);
   border-radius: 3px;
 }
 .me-dom-status {
   display: block;
-  font: 12px/1.5 sans-serif;
+  font: 12px/1.5 var(--me-ui-font-family, system-ui, sans-serif);
 }
 .me-dom-status:empty {
   display: none;
 }
-.me-dom-menu {
-  position: fixed;
-  z-index: 1000;
-  max-height: 230px;
-  overflow-y: auto;
-  width: 290px;
-}
 .me-dom-menu[hidden] {
   display: none;
 }
-.me-dom-menu .me-suggestions {
-  position: static;
+.me-dom-menu[data-compact='true'] .me-suggestion-heading,
+.me-dom-menu[data-compact='true'] .me-suggestion-footer {
+  display: none;
 }
 .me-dom-editor[data-mode='inline'] {
   display: inline-block;
@@ -755,7 +772,7 @@
 }
 .me-dom-editor[data-mode='inline'] .me-surface {
   display: inline-block;
-  padding: 2px 4px;
+  padding: var(--me-inline-padding, 2px 4px);
   min-height: 0;
 }
 .me-dom-editor[data-mode='inline'] .me-document-lines {
@@ -802,7 +819,7 @@
   font-family: 'Barocss Math Glyphs', Georgia, serif;
   font-style: normal;
   white-space: pre;
-  color: #263b32;
+  color: var(--me-text, #263b32);
 }
 .me-textGroup .me-preview-token *,
 .me-operatorName .me-preview-token * {
@@ -946,13 +963,10 @@
 }
 
 /* Functions are semantic operator nodes, distinct from ordinary variables. */
-.me-editor {
-  --me-function: #087b78;
-}
 .me-operatorName :is(.me-input, .me-preview-token, .me-measure),
 .me-limit-glyph,
 .me-token-legend [data-kind='function'] {
-  color: var(--me-function);
+  color: var(--me-function, #087b78);
 }
 
 /* Explicit LaTeX spacing is content, independent of empty caret hit areas. */
@@ -969,7 +983,7 @@
 }
 .me-quad:hover,
 .me-qquad:hover {
-  background: var(--me-focus);
+  background: var(--me-input-focus-background, var(--me-focus));
 }
 
 .me-roman :is(.me-input, .me-measure, .me-preview-token) {
@@ -1336,10 +1350,10 @@
   min-height: 32px;
   padding: 7px 12px;
   gap: 9px;
-  border: 1px solid #b8cec3;
-  border-radius: 7px;
-  background: #edf4ef;
-  color: #245443;
+  border: 1px solid var(--me-accent, #b8cec3);
+  border-radius: var(--me-control-radius, 7px);
+  background: var(--me-active-background, #edf4ef);
+  color: var(--me-accent, #245443);
   font-weight: 600;
   white-space: nowrap;
 }
@@ -1355,16 +1369,46 @@
   transform: translateY(2px) rotate(225deg);
 }
 .me-tools .me-toolbar-toggle:hover {
-  background: #dfece4;
-  border-color: #8fac9c;
+  background: var(--me-hover-background, #dfece4);
+  border-color: var(--me-accent, #8fac9c);
 }
 .me-tools .me-toolbar-toggle[aria-expanded='true'] {
-  background: #dfece4;
+  background: var(--me-hover-background, #dfece4);
 }
 .me-tools .me-toolbar-toggle:focus-visible {
   outline-offset: 2px;
 }
 
+/* Native discovery panels share their toolbar's containment and iframe document. */
+.me-dom-toolbar-panels {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+}
+.me-dom-toolbar-panels[hidden],
+.me-dom-grid-tools[hidden] {
+  display: none;
+}
+.me-dom-symbol-browser {
+  box-sizing: border-box;
+  max-width: 100%;
+  border: 1px solid var(--me-line, #d9e1dd);
+  border-radius: 0 0 8px 8px;
+  color: var(--me-text, #202c27);
+}
+.me-dom-symbol-browser .me-symbol-grid {
+  max-height: min(350px, 45vh);
+}
+.me-dom-symbol-browser .me-symbol-grid button:focus-visible {
+  background: var(--me-active-background, #e7f2ed);
+  border-color: var(--me-accent, #9cbbac);
+}
+.me-dom-grid-tools {
+  flex-wrap: wrap;
+  margin: 0;
+  border-top: 0;
+}
+
 /* Fixed accents stay centered; wide variants follow the editable body. */
 :is(.me-tilde, .me-bar, .me-dot, .me-ddot, .me-widehat, .me-widetilde) {
   position: relative;
@@ -1602,3 +1646,84 @@
   justify-self: start;
   transform: scaleX(-1);
 }
+.me-matrix-cell[data-cell-selected='true'] {
+  background: color-mix(in srgb, var(--me-accent, #32745d) 18%, transparent);
+  border-radius: 0.12em;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--me-accent, #32745d) 35%, transparent);
+}
+
+/* Shared, nonmodal utilities keep native input and host draft events contained. */
+.me-utility-panel {
+  padding: 12px;
+  border-top: 1px solid var(--me-line, #dcdfe2);
+  font: 13px/1.5 system-ui, sans-serif;
+  color: var(--me-text, #253b33);
+}
+.me-utility-panel label {
+  display: grid;
+  gap: 6px;
+}
+.me-utility-panel textarea {
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  padding: 8px;
+  font: 14px/1.5 monospace;
+  color: inherit;
+  background: var(--me-control-bg, #fff);
+  border: 1px solid var(--me-line, #dcdfe2);
+  border-radius: var(--me-control-radius, 5px);
+}
+.me-utility-actions {
+  display: flex;
+  gap: 8px;
+}
+.me-utility-panel button {
+  padding: 6px 10px;
+  color: inherit;
+  background: var(--me-control-bg, #fff);
+  border: 1px solid var(--me-line, #dcdfe2);
+  border-radius: var(--me-control-radius, 5px);
+  cursor: pointer;
+}
+.me-utility-error {
+  color: var(--me-error, #a52d2d);
+}
+.me-utility-error:empty {
+  display: none;
+}
+
+.me-quick-panel .me-utility-actions {
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+.me-quick-panel .me-symbol-grid {
+  max-height: 260px;
+  overflow: auto;
+}
+.me-quick-item {
+  display: flex;
+  min-width: 0;
+  gap: 2px;
+}
+.me-quick-item button:first-child {
+  flex: 1;
+  min-width: 0;
+  text-align: start;
+}
+.me-quick-item button:last-child {
+  flex: none;
+}
+.me-quick-item button[aria-pressed='true'] {
+  color: var(--me-number, #a65316);
+  background: var(--me-active-bg, #edf3ff);
+}
+
+.me-presentation-tools[hidden] {
+  display: none;
+}
+.me-presentation-tools label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}