@barocss/math-editor 0.2.1 → 0.5.0

package/src/style.css

@@ -1,23 +1,39 @@
-/* Use lining numerals for mathematical baselines and a clear similarity sign.
-   Georgia's text numerals have uneven heights and its U+223C is unusually curled. */
+/* Match the reference math faces in both editable inputs and passive runs.
+   The bundled fonts retain their KaTeX license in src/fonts. */
 @font-face {
   font-family: 'Barocss Math Glyphs';
   src: url('./fonts/KaTeX_Main-Regular.woff2') format('woff2');
-  unicode-range: U+0030-0039, U+223C;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Barocss Math Glyphs';
+  src: url('./fonts/KaTeX_Math-Italic.woff2') format('woff2');
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Barocss Large Operators';
+  src: url('./fonts/KaTeX_Size2-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-display: swap;
 }
 .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 +41,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 +98,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;
@@ -124,11 +140,12 @@
   align-self: flex-end;
   transform: translateY(0.3em);
 }
+/* Normal scripts use TeX script size; root indices use scriptscript size (VIS-004/005). */
 .me-superscript > .me-slot:last-child .me-input,
 .me-subscript > .me-slot:last-child .me-input,
 .me-superscript > .me-slot:last-child .me-measure,
 .me-subscript > .me-slot:last-child .me-measure {
-  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
 }
 .me-suggestions {
   position: absolute;
@@ -137,10 +154,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 +166,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 +211,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 +278,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;
@@ -263,10 +302,10 @@
 }
 .me-limit .me-input,
 .me-limit .me-measure {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
 }
 .me-operator-glyph {
-  font: 35px/1 'Barocss Math Glyphs', Georgia, serif;
+  font: calc(var(--me-font-size, 22px) * 1.59) / 1 'Barocss Math Glyphs', Georgia, serif;
 }
 .me-large-operator {
   gap: 8px;
@@ -277,63 +316,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 +383,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 +478,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 +497,7 @@
 }
 .me-matrix-tools small {
   font-size: 11px;
-  color: #77758b;
+  color: var(--me-muted, #77758b);
 }
 
 .me-matrix-size {
@@ -466,8 +505,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 +515,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 +542,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 +576,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,29 +617,29 @@
   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,
 .me-subscript > .me-slot:last-child .me-preview-token {
-  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
 }
 .me-limit .me-preview-token {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.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 +647,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 +655,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 +675,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 +695,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 +722,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 +764,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 +788,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 {
@@ -787,7 +820,7 @@
   grid-row: 1;
 }
 .me-scripts > .me-slot:not(:first-child) :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
 }
 
 .me-textGroup,
@@ -802,7 +835,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 * {
@@ -833,7 +866,7 @@
   margin-top: 4px;
 }
 .me-indexedRoot > .me-slot:nth-last-child(2) :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.5);
 }
 
 /* Accents follow the editable body's width, including nested structures. */
@@ -932,7 +965,7 @@
   align-self: baseline;
 }
 .me-limit-operator .me-limit :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
   line-height: 1.1;
   padding-block: 1px;
 }
@@ -946,13 +979,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 +999,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) {
@@ -984,7 +1014,7 @@
   font-size: calc(var(--me-font-size, 22px) * 16 / 22);
 }
 .me-limit :is(.me-quad, .me-qquad) {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
 }
 
 /* Structured delimiters export as \left/\right and stretch with their body. */
@@ -1001,14 +1031,11 @@
 :is(.me-parentheses, .me-brackets, .me-absolute) > .me-delimiter:last-child {
   border-right: 1.5px solid currentColor;
 }
-/* A tapered curve keeps its bow at tall sizes; an elliptical border flattens. */
+/* The outline mask is shared with mixed fences in the contour rules below. */
 .me-parentheses > .me-delimiter:first-child,
 .me-parentheses > .me-delimiter:last-child {
-  flex-basis: 8px;
   border: 0;
   background: currentColor;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0C4 16 0 32 0 50C0 68 4 84 14 100L14 97C7 80 3 65 3 50C3 35 7 20 14 3Z'/%3E%3C/svg%3E")
-    center / 100% 100% no-repeat;
 }
 .me-parentheses > .me-delimiter:last-child {
   transform: scaleX(-1);
@@ -1038,7 +1065,7 @@
 :is(.me-openClosed, .me-closedOpen, .me-fenced) > :is([data-fence='('], [data-fence=')']),
 .me-matrix[data-environment='pmatrix'] > .me-matrix-delimiter {
   background: currentColor;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0C4 16 0 32 0 50C0 68 4 84 14 100L14 97C7 80 3 65 3 50C3 35 7 20 14 3Z'/%3E%3C/svg%3E")
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 100' preserveAspectRatio='none'%3E%3Cpath d='M14 0C4 16 0 32 0 50C0 68 4 84 14 100L14 98C7 80 2.5 65 2.5 50C2.5 35 7 20 14 2Z'/%3E%3C/svg%3E")
     center / 100% 100% no-repeat;
 }
 .me-delimiter[data-fence=')'] {
@@ -1090,7 +1117,7 @@
 :is(.me-overset, .me-underset)
   > .me-slot:first-child
   :is(.me-input, .me-preview-token, .me-measure) {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
 }
 /* Square and indexed roots share a radical joined to the radicand's overbar. */
 .me-root > .me-radical,
@@ -1102,17 +1129,6 @@
   margin-top: 4px;
   font-size: 0;
   background: currentColor;
-  clip-path: polygon(
-    0 55%,
-    6px 50%,
-    12px 88%,
-    21px 0,
-    100% 0,
-    14px 100%,
-    11px 100%,
-    5px 58%,
-    1px 61%
-  );
 }
 .me-indexedRoot > .me-slot:nth-last-child(2) {
   margin-right: -9px;
@@ -1155,7 +1171,7 @@
   > .me-operator-glyph {
   grid-column: 1;
   grid-row: 1 / 3;
-  font-size: 44px;
+  font-size: calc(var(--me-font-size, 22px) * 2);
 }
 :is(
     [data-structure='integral'],
@@ -1215,11 +1231,12 @@
 /* Keep nested fractions readable while avoiding full-size recursive stacks.
    Apply the same size to the input, passive glyph and measuring twin. */
 .me-fraction .me-fraction :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
-  line-height: 1.2;
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  line-height: 1;
+  padding-block: 0;
 }
 .me-fraction .me-fraction .me-fraction :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: 12px;
+  font-size: calc(var(--me-font-size, 22px) * 0.5);
 }
 .me-fraction .me-fraction .me-row {
   min-height: 0;
@@ -1275,8 +1292,8 @@
 }
 [data-structure='contourIntegral'][data-limit-placement] > .me-limits > .me-operator-glyph {
   font: normal var(--me-font-size, 22px) / 2.3 'Barocss Contour', serif;
-  width: 25px;
-  height: 51px;
+  width: calc(var(--me-font-size, 22px) * 25 / 22);
+  height: calc(var(--me-font-size, 22px) * 2.3);
   transform: none;
 }
 
@@ -1300,7 +1317,7 @@
 :is(.me-overbrace, .me-underbrace)
   > .me-slot:first-child
   :is(.me-input, .me-measure, .me-preview-token) {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
   line-height: 1.1;
 }
 :is(.me-overbrace, .me-underbrace) > .me-slot:last-child {
@@ -1308,20 +1325,23 @@
   width: 100%;
   box-sizing: border-box;
 }
+:is(.me-overbrace, .me-underbrace) > .me-slot:last-child {
+  min-width: calc(var(--me-font-size, 22px) * 1.6);
+}
 .me-overbrace > .me-slot:last-child {
-  padding-top: 9px;
+  padding-top: calc(var(--me-font-size, 22px) * 0.4);
 }
 .me-underbrace > .me-slot:last-child {
-  padding-bottom: 9px;
+  padding-bottom: calc(var(--me-font-size, 22px) * 0.4);
 }
 :is(.me-overbrace, .me-underbrace) > .me-slot:last-child::before {
   content: '';
   position: absolute;
   inset-inline: 0;
   top: 0;
-  height: 8px;
+  height: calc(var(--me-font-size, 22px) * 0.35);
   background: currentColor;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12Q0 5 12 5L38 5Q48 5 50 0Q52 5 62 5L88 5Q100 5 100 12L98 12Q98 8 88 8L62 8Q53 8 50 4Q47 8 38 8L12 8Q2 8 2 12Z'/%3E%3C/svg%3E")
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12C4 6 12 7 24 5C37 3 45 2 50 0C55 2 63 3 76 5C88 7 96 6 100 12L98 12C94 9 86 10 75 8C62 6 54 5 50 3C46 5 38 6 25 8C14 10 6 9 2 12Z'/%3E%3C/svg%3E")
     center / 100% 100% no-repeat;
   pointer-events: none;
 }
@@ -1336,10 +1356,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 +1375,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;
@@ -1450,7 +1500,7 @@
   )[data-limit-placement='nolimits']
   > .me-limits
   > .me-operator-glyph {
-  font-size: 44px;
+  font-size: calc(var(--me-font-size, 22px) * 2);
 }
 
 /* TeX math units: 18mu = 1em. Negative spacing has no painted hit box. */
@@ -1485,12 +1535,12 @@
 /* Explicit fraction/binomial styles override the surrounding default size.
    Nested explicit styles use the nearest style container's inherited value. */
 .me-structure[data-math-style='display'] {
-  --me-explicit-size: 22px;
+  --me-explicit-size: var(--me-font-size, 22px);
 }
 .me-structure[data-math-style='text'] {
-  --me-explicit-size: 16px;
+  --me-explicit-size: calc(var(--me-font-size, 22px) * 0.7);
 }
-.me-structure[data-math-style] :is(.me-input, .me-measure, .me-preview-token) {
+.me-structure[data-math-style] > .me-slot :is(.me-input, .me-measure, .me-preview-token) {
   font-size: var(--me-explicit-size);
 }
 .me-structure[data-math-style='text'] > .me-slot > .me-row {
@@ -1602,3 +1652,729 @@
   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;
+}
+
+/* A fraction inside a script uses scriptscript-sized terms. Its rows must not
+   retain the body's minimum line height, including while a term is editable. */
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  .me-fraction:not([data-math-style='display'])
+  :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: calc(var(--me-font-size, 22px) * 0.5);
+  line-height: 1.1;
+  padding-block: 0;
+}
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  .me-fraction:not([data-math-style='display'])
+  .me-row {
+  min-height: 0;
+}
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  .me-fraction:not([data-math-style='display'])
+  > .me-slot {
+  padding: 0 2px;
+}
+/* Compact fraction terms already reduce the script height. A simple base needs
+   only a small shift; a tall structured base needs height-relative clearance. */
+.me-superscript > .me-slot:last-child:has(> .me-row > .me-fraction) {
+  transform: translateY(-0.2em);
+}
+.me-subscript > .me-slot:last-child:has(> .me-row > .me-fraction) {
+  transform: translateY(0.2em);
+}
+.me-superscript:has(> .me-slot:first-child > .me-row > .me-structure)
+  > .me-slot:last-child:has(> .me-row > .me-fraction) {
+  transform: translateY(-45%);
+}
+.me-subscript:has(> .me-slot:first-child > .me-row > .me-structure)
+  > .me-slot:last-child:has(> .me-row > .me-fraction) {
+  transform: translateY(45%);
+}
+/* Empty model boundaries are caret targets, not extra space before a script. */
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  > .me-row
+  > .me-empty-boundary:not(:focus-within)
+  > .me-measure {
+  min-width: 1px;
+  width: 1px;
+  padding-inline: 0;
+}
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  > .me-row
+  > .me-fraction {
+  margin-inline: 1px;
+}
+
+/* Query-independent structure actions remain visible while their operand is edited. */
+.me-context-footer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--me-line, #d9e1dd);
+  background: var(--me-subtle-background, #f6f8f6);
+  color: var(--me-text, #202c27);
+  font: 12px/1.4 var(--me-ui-font-family, system-ui, sans-serif);
+  text-align: start;
+}
+.me-context-footer[hidden] {
+  display: none;
+}
+.me-context-label {
+  font-weight: 600;
+}
+.me-context-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.me-context-button {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  background: var(--me-panel-background, white);
+  border: 1px solid var(--me-line, #cbd8cf);
+  border-radius: var(--me-control-radius, 6px);
+  padding: 6px 10px;
+  cursor: pointer;
+}
+.me-context-button:hover:not(:disabled) {
+  background: var(--me-hover-background, #e7efe9);
+}
+.me-context-button:focus-visible {
+  outline: 2px solid var(--me-accent, #236957);
+  outline-offset: 2px;
+}
+.me-context-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.me-context-hint {
+  color: var(--me-muted, #708075);
+  font-size: 11px;
+}
+.me-context-button[aria-pressed='true'] {
+  background: var(--me-hover-background, #e7efe9);
+  color: var(--me-accent, #236957);
+  font-weight: 600;
+}
+
+/* Geometry audit: remove UI line-box struts from math stacks. Keep the same
+   metrics for passive text, the input, and its measuring span. */
+.me-large-operator > .me-limits > .me-limit {
+  display: inline-flex;
+}
+.me-large-operator > .me-limits > .me-limit > .me-row {
+  min-height: 0;
+}
+.me-large-operator .me-limit :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.1;
+  padding-block: 0;
+}
+/* Side bounds span the full integral height, with room for the glyph's slant. */
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )
+  > .me-limits
+  > :is(.me-limit:first-child, .me-limit:last-child) {
+  position: relative;
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )
+  > .me-limits
+  > .me-operator-glyph {
+  font-size: calc(var(--me-font-size, 22px) * 2);
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )
+  > .me-limits
+  > .me-limit:first-child {
+  top: calc(var(--me-font-size, 22px) * -0.35);
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )
+  > .me-limits
+  > .me-limit:last-child {
+  top: calc(var(--me-font-size, 22px) * 0.25);
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement='limits']
+  > .me-limits
+  > .me-limit {
+  top: 0;
+}
+/* Annotation rows overlap their text line boxes, not their painted glyphs. */
+:is(.me-overset, .me-underset) > .me-slot {
+  display: inline-flex;
+  justify-content: center;
+}
+:is(.me-overset, .me-underset) > .me-slot > .me-row {
+  min-height: 0;
+}
+:is(.me-overset, .me-underset) > .me-slot :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1;
+  padding-block: 0;
+}
+.me-overset > .me-slot:first-child {
+  margin-bottom: calc(var(--me-font-size, 22px) * -0.2);
+}
+.me-underset > .me-slot:first-child {
+  margin-top: calc(var(--me-font-size, 22px) * -0.2);
+}
+/* Matrix environments use text-style cells; aligned/cases retain display rows. */
+.me-matrix[data-structure='matrix'] > .me-matrix-grid {
+  row-gap: calc(var(--me-font-size, 22px) * 0.07);
+}
+.me-matrix[data-structure='matrix'] > .me-matrix-grid > .me-matrix-cell > .me-row {
+  min-height: 0;
+}
+.me-matrix[data-structure='matrix']
+  > .me-matrix-grid
+  > .me-matrix-cell
+  > .me-row
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.2;
+  padding-block: 0;
+}
+.me-matrix[data-structure='matrix']
+  .me-fraction:not([data-math-style='display'])
+  :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
+  line-height: 0.85;
+  padding-block: 0;
+}
+.me-matrix[data-structure='matrix'] .me-fraction:not([data-math-style='display']) .me-row {
+  min-height: 0;
+}
+
+/* Brace annotations need a compact body row as well as a compact label row. */
+:is(.me-overbrace, .me-underbrace) > .me-slot > .me-row {
+  min-height: 0;
+}
+:is(.me-overbrace, .me-underbrace) > .me-slot :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.1;
+  padding-block: 0;
+}
+/* A display fraction in a script keeps full-size terms. Raise/lower the whole
+   stack so that its near edge clears the base, not just its fraction bar. */
+.me-superscript > .me-slot:last-child:has(> .me-row > .me-fraction[data-math-style='display']) {
+  transform: translateY(-30%);
+}
+.me-subscript > .me-slot:last-child:has(> .me-row > .me-fraction[data-math-style='display']) {
+  transform: translateY(30%);
+}
+
+/* Use the display operator glyphs themselves, including their italic correction,
+   rather than enlarging/skewing a text-font integral or sum. */
+.me-large-operator[data-structure][data-limit-placement] > .me-limits > .me-operator-glyph {
+  font: normal var(--me-font-size, 22px) / 1.6 'Barocss Large Operators', serif;
+  transform: none;
+  width: auto;
+  height: calc(var(--me-font-size, 22px) * 1.6);
+}
+.me-large-operator:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement]
+  > .me-limits
+  > .me-operator-glyph {
+  line-height: 2.3;
+  height: calc(var(--me-font-size, 22px) * 2.3);
+}
+/* Keep fence curvature and stroke proportional to the chosen math size. */
+.me-parentheses > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced) > :is([data-fence='('], [data-fence=')']) {
+  flex-basis: calc(var(--me-font-size, 22px) * 0.389);
+}
+.me-parentheses:has(> .me-slot .me-structure) > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced):has(> .me-slot .me-structure)
+  > :is([data-fence='('], [data-fence=')']) {
+  flex-basis: calc(var(--me-font-size, 22px) * 0.55);
+}
+.me-matrix[data-environment='pmatrix'] > .me-matrix-delimiter {
+  width: calc(var(--me-font-size, 22px) * 0.55);
+}
+.me-delimiter:is([data-fence='{'], [data-fence='}']),
+.me-matrix:is([data-environment='Bmatrix'], [data-structure='cases']) > .me-matrix-delimiter {
+  width: calc(var(--me-font-size, 22px) * 0.55);
+  flex-basis: calc(var(--me-font-size, 22px) * 0.55);
+}
+
+/* Brace outlines derived from KaTeX 0.16.28 svgGeometry.js (MIT; see
+   fonts/LICENSE-KaTeX.txt). Clip three slices so long braces keep curved ends. */
+:is(.me-overbrace, .me-underbrace) > .me-slot:last-child::before {
+  height: calc(var(--me-font-size, 22px) * 0.548);
+  mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3Csvg%20x%3D%220%22%20width%3D%2225%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20400000%20548%22%20preserveAspectRatio%3D%22xMinYMin%20slice%22%3E%3Cpath%20d%3D%22M6%20548l-6-6v-35l6-11c56-104%20135.3-181.3%20238-232%2057.3-28.7%20117%20-45%20179-50h399577v120H403c-43.3%207-81%2015-113%2026-100.7%2033-179.7%2091-237%20174-2.7%20%205-6%209-10%2013-.7%201-7.3%201-20%201H6z%22%2F%3E%3C%2Fsvg%3E%3Csvg%20x%3D%2225%25%22%20width%3D%2250%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20400000%20548%22%20preserveAspectRatio%3D%22xMidYMin%20slice%22%3E%3Cpath%20d%3D%22M200428%20334%20c-100.7-8.3-195.3-44-280-108-55.3-42-101.7-93-139-153l-9-14c-2.7%204-5.7%208.7-9%2014%20-53.3%2086.7-123.7%20153-211%20199-66.7%2036-137.3%2056.3-212%2062H0V214h199568c178.3-11.7%20%20311.7-78.3%20403-201%206-8%209.7-12%2011-12%20.7-.7%206.7-1%2018-1s17.3.3%2018%201c1.3%200%205%204%2011%20%2012%2044.7%2059.3%20101.3%20106.3%20170%20141s145.3%2054.3%20229%2060h199572v120z%22%2F%3E%3C%2Fsvg%3E%3Csvg%20x%3D%2275%25%22%20width%3D%2225%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20400000%20548%22%20preserveAspectRatio%3D%22xMaxYMin%20slice%22%3E%3Cpath%20d%3D%22M400000%20542l%20-6%206h-17c-12.7%200-19.3-.3-20-1-4-4-7.3-8.3-10-13-35.3-51.3-80.8-93.8-136.5-127.5%20s-117.2-55.8-184.5-66.5c-.7%200-2-.3-4-1-18.7-2.7-76-4.3-172-5H0V214h399571l6%201%20c124.7%208%20235%2061.7%20331%20161%2031.3%2033.3%2059.7%2072.7%2085%20118l7%2013v35z%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E')
+    center / 100% 100% no-repeat;
+}
+.me-overbrace > .me-slot:last-child {
+  padding-top: calc(var(--me-font-size, 22px) * 0.598);
+}
+.me-underbrace > .me-slot:last-child {
+  padding-bottom: calc(var(--me-font-size, 22px) * 0.598);
+}
+.me-overbrace > .me-slot:first-child {
+  margin-bottom: calc(var(--me-font-size, 22px) * -0.2);
+}
+.me-underbrace > .me-slot:first-child {
+  margin-top: calc(var(--me-font-size, 22px) * -0.2);
+}
+.me-root > .me-radical,
+.me-indexedRoot > .me-radical {
+  width: calc(var(--me-font-size, 22px) * 0.85);
+}
+.me-indexedRoot > .me-slot:nth-last-child(2) {
+  align-self: center;
+  display: inline-flex;
+  margin-right: calc(var(--me-font-size, 22px) * -0.6);
+  margin-top: 0;
+  transform: translate(
+    calc(var(--me-font-size, 22px) * 0.35),
+    calc(var(--me-font-size, 22px) * -0.3)
+  );
+}
+.me-indexedRoot > .me-slot:nth-last-child(2) > .me-row {
+  min-height: 0;
+}
+.me-matrix[data-structure='matrix'] > .me-matrix-grid {
+  column-gap: calc(var(--me-font-size, 22px) * 0.8);
+}
+
+/* TeX leaves a thin space after a large operator. Integral side limits also
+   need its italic correction so their upper label clears the slanted tip. */
+.me-large-operator {
+  gap: calc(var(--me-font-size, 22px) / 6);
+}
+.me-large-operator:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  ):not([data-limit-placement='limits'])
+  > .me-limits
+  > .me-limit:first-child {
+  margin-left: calc(var(--me-font-size, 22px) * 0.44445);
+}
+.me-large-operator:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement='limits']
+  > .me-limits
+  > .me-operator-glyph {
+  padding-inline-end: calc(var(--me-font-size, 22px) * 0.44445);
+}
+.me-large-operator:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement='limits']
+  > .me-limits
+  > .me-limit:last-child {
+  transform: translateX(calc(var(--me-font-size, 22px) * -0.22222));
+}
+/* The upright glyph's lower side limit no longer needs the negative offset
+   used for the skewed text-font integral. */
+.me-large-operator:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  ):not([data-limit-placement='limits'])
+  > .me-limits
+  > .me-limit:last-child {
+  margin-left: 0;
+}
+/* A radical encloses math ink rather than the taller UI text line box.
+   Tall nested structures continue to determine their own row height. */
+:is(.me-root, .me-indexedRoot) > .me-slot:last-child > .me-row {
+  min-height: 0;
+}
+:is(.me-root, .me-indexedRoot)
+  > .me-slot:last-child
+  > .me-row
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1;
+  padding-block: 0;
+}
+
+/* Inline math uses text-style operator glyphs and side limits by default.
+   Explicit limits/nolimits remain authoritative. */
+@font-face {
+  font-family: 'Barocss Small Operators';
+  src: url('./fonts/KaTeX_Size1-Regular.woff2') format('woff2');
+  font-style: normal;
+  font-display: swap;
+}
+/* TeX stops reducing nested scripts at scriptscript size. */
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  :is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: calc(var(--me-font-size, 22px) * 0.5);
+  line-height: 1.1;
+  padding-block: 0;
+}
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  :is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  > .me-row {
+  min-height: 0;
+}
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  :is(.me-root, .me-indexedRoot)
+  > .me-radical {
+  width: calc(var(--me-font-size, 22px) * 0.595);
+  min-height: calc(var(--me-font-size, 22px) * 0.7);
+}
+.me-superscript > .me-slot:last-child:has(> .me-row > :is(.me-root, .me-indexedRoot)) {
+  transform: translateY(-15%);
+}
+
+/* Nested scripts need less lift after their line boxes shrink. */
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  .me-superscript
+  > .me-slot:last-child {
+  transform: translateY(-0.1em);
+}
+
+/* KaTeX glyph contours retain the short curve and tall end caps. The cap
+   length is bounded; only the straight stem extends for very tall bodies. */
+.me-parentheses > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced) > :is([data-fence='('], [data-fence=')']) {
+  mask: url('./shapes/parenthesis.svg') center / 61.44% var(--me-font-size, 22px) no-repeat;
+}
+.me-parentheses:has(> .me-slot .me-structure) > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced):has(> .me-slot .me-structure)
+  > :is([data-fence='('], [data-fence=')']),
+.me-matrix[data-environment='pmatrix'] > .me-matrix-delimiter {
+  --me-fence-cap: min(50%, calc(var(--me-font-size, 22px) * 1.809));
+  mask: url('./shapes/parenthesis-top.svg') left top / 100% var(--me-fence-cap) no-repeat,
+    url('./shapes/parenthesis-bottom.svg') left bottom / 100% var(--me-fence-cap) no-repeat,
+    linear-gradient(currentColor, currentColor) left center / 22.826%
+      calc(100% - var(--me-fence-cap) - var(--me-fence-cap) + 1px) no-repeat;
+}
+
+/* The font contour has a tapered entry and thin rising stroke. Reusing it
+   avoids the thick uniform diagonal produced by the old polygon. */
+:is(.me-root, .me-indexedRoot) > .me-radical {
+  clip-path: none;
+  mask: url('./shapes/radical.svg') center / 100% 100% no-repeat;
+}
+
+/* A nested radical needs clearance above its own rule. Without this space,
+   successive rules collapse together even when the operand metrics agree. */
+:is(.me-root, .me-indexedRoot)
+  > .me-slot:last-child:has(> .me-row > :is(.me-root, .me-indexedRoot)) {
+  padding-top: calc(var(--me-font-size, 22px) * 0.25);
+}
+
+/* Resolve reduced operator styles from model slots. Display operators retain
+   their existing geometry; text/script contexts use Size1 and side limits. */
+.me-editor [data-operator-style] {
+  --me-operator-scale: 1;
+  --me-bound-scale: 0.7;
+  --me-operator-size: calc(var(--me-font-size, 22px) * var(--me-operator-scale));
+}
+.me-editor [data-operator-style='script'] {
+  --me-operator-scale: 0.7;
+  --me-bound-scale: 0.5;
+}
+.me-editor [data-operator-style='scriptscript'] {
+  --me-operator-scale: 0.5;
+  --me-bound-scale: 0.5;
+}
+.me-editor
+  .me-large-operator[data-operator-style]:not([data-operator-style='display'])
+  > .me-limits
+  > .me-operator-glyph {
+  font: normal var(--me-operator-size) / 1.1 'Barocss Small Operators', serif;
+  height: calc(var(--me-operator-size) * 1.1);
+  transform: none;
+}
+.me-editor
+  :is(.me-large-operator, .me-limit-operator)[data-operator-style]:not(
+    [data-operator-style='display']
+  ) {
+  gap: calc(var(--me-operator-size) / 6);
+}
+.me-editor .me-large-operator[data-operator-style][data-layout-limits='side'] > .me-limits {
+  display: inline-grid;
+  grid-template-columns: max-content max-content;
+  grid-template-rows: auto auto;
+  align-items: center;
+}
+.me-editor
+  .me-large-operator[data-operator-style][data-layout-limits='side']
+  > .me-limits
+  > .me-operator-glyph {
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+.me-editor
+  .me-large-operator[data-operator-style][data-layout-limits='side']
+  > .me-limits
+  > .me-limit:first-child {
+  grid-column: 2;
+  grid-row: 1;
+}
+.me-editor
+  .me-large-operator[data-operator-style][data-layout-limits='side']
+  > .me-limits
+  > .me-limit:last-child {
+  grid-column: 2;
+  grid-row: 2;
+}
+.me-editor
+  .me-large-operator[data-operator-style]:not([data-operator-style='display'])
+  > .me-limits
+  > .me-limit {
+  top: 0;
+  margin-left: 0;
+}
+.me-editor
+  .me-large-operator[data-operator-style]:not([data-operator-style='display']):is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-layout-limits='side']
+  > .me-limits
+  > .me-limit:first-child {
+  margin-left: calc(var(--me-operator-size) * 0.19445);
+  top: calc(var(--me-operator-size) * -0.12);
+}
+.me-editor
+  .me-large-operator[data-operator-style]:not([data-operator-style='display']):is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-layout-limits='side']
+  > .me-limits
+  > .me-limit:last-child {
+  top: calc(var(--me-operator-size) * 0.08);
+}
+.me-editor
+  .me-large-operator[data-operator-style]:not([data-operator-style='display']):is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-layout-limits='stacked']
+  > .me-limits
+  > .me-operator-glyph {
+  padding-inline-end: calc(var(--me-operator-size) * 0.19445);
+}
+.me-editor
+  .me-large-operator[data-operator-style]:not([data-operator-style='display']):is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-layout-limits='stacked']
+  > .me-limits
+  > .me-limit:last-child {
+  transform: translateX(calc(var(--me-operator-size) * -0.097225));
+}
+.me-editor
+  .me-limit-operator[data-operator-style]:not([data-operator-style='display'])
+  > .me-limits
+  > .me-limit-glyph {
+  font-size: var(--me-operator-size);
+}
+.me-editor .me-limit-operator[data-operator-style][data-layout-limits='side'] > .me-limits {
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+}
+.me-editor
+  .me-limit-operator[data-operator-style][data-layout-limits='side']
+  > .me-limits
+  > .me-limit {
+  transform: translateY(calc(var(--me-operator-size) * 0.18));
+}
+/* Row styles distinguish a nested operator body from its own smaller bounds.
+   Do not apply an ancestor bound's size to every descendant text token. */
+.me-editor [data-operator-style]:not([data-operator-style='display']) .me-row[data-layout-style] {
+  min-height: 0;
+}
+.me-editor
+  [data-operator-style]:not([data-operator-style='display'])
+  .me-row[data-layout-style]
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: var(--me-font-size, 22px);
+  line-height: 1.1;
+  padding-block: 0;
+}
+.me-editor
+  [data-operator-style]:not([data-operator-style='display'])
+  .me-row[data-layout-style='script']
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: calc(var(--me-font-size, 22px) * 0.7);
+}
+.me-editor
+  [data-operator-style]:not([data-operator-style='display'])
+  .me-row[data-layout-style='scriptscript']
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: calc(var(--me-font-size, 22px) * 0.5);
+}
+
+/* Glyph width and mathematical spacing are separate from the caret hit area.
+   Binary/relation/punctuation gaps disappear in script styles. Empty slots
+   retain their existing minimum width; only model boundaries shrink. */
+.me-row {
+  --me-spacing-unit: calc(var(--me-font-size, 22px) / 18);
+}
+.me-row[data-layout-style='script'],
+.me-row[data-layout-style='scriptscript'] {
+  --me-spacing-unit: 0px;
+}
+.me-row > :is(.me-run, .me-operatorName, .me-fraction)[data-math-spacing='true'] {
+  margin-left: calc(var(--me-space-before, 0) * var(--me-spacing-unit));
+  margin-right: calc(var(--me-space-after, 0) * var(--me-spacing-unit));
+}
+.me-run[data-math-spacing='true']:not(.me-empty) > .me-measure {
+  padding-inline: 0;
+  min-width: 0;
+}
+.me-row > .me-empty-boundary:not(:focus-within) > .me-measure {
+  min-width: 1px;
+  width: 1px;
+  padding-inline: 0;
+}
+
+/* Function names contribute glyph width only. The row sets their thin spacing,
+   including the suppressed gap before an opening parenthesis. */
+.me-operatorName > .me-slot > .me-row > .me-run:not(.me-empty) > .me-measure {
+  min-width: 0;
+  padding-inline: 0;
+}
+.me-row[data-layout-style='script'] {
+  --me-tight-unit: calc(var(--me-font-size, 22px) * 0.7 / 18);
+}
+.me-row[data-layout-style='scriptscript'] {
+  --me-tight-unit: calc(var(--me-font-size, 22px) * 0.5 / 18);
+}
+.me-row:is([data-layout-style='script'], [data-layout-style='scriptscript'])
+  > [data-math-spacing='true'] {
+  margin-left: calc(var(--me-tight-before, 0) * var(--me-tight-unit));
+  margin-right: calc(var(--me-tight-after, 0) * var(--me-tight-unit));
+}