@barocss/math-editor 0.4.0 → 0.6.1

package/src/style.css

@@ -1,10 +1,27 @@
-/* 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;
+}
+/* Editing glyphs have a readable floor. Set --me-min-font-size: 0px for
+   unmodified TeX size ratios. This does not change serialized math. */
 .me-editor {
   color: var(--me-text, #202c27);
   font-family: var(--me-ui-font-family, system-ui, sans-serif);
@@ -33,7 +50,10 @@
   font: 12px var(--me-ui-font-family, system-ui, sans-serif);
 }
 .me-tools button span {
-  font: 20px 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    20px 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 .me-tools button:hover {
   background: var(--me-hover-background, #edf3ef);
@@ -71,7 +91,11 @@
 }
 .me-input,
 .me-measure {
-  font: italic var(--me-font-size, 22px) 'Barocss Math Glyphs', Georgia, 'Times New Roman', serif;
+  font:
+    italic max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) 'Barocss Math Glyphs',
+    Georgia,
+    'Times New Roman',
+    serif;
   line-height: 1.35;
   min-width: 1ch;
   border: 0;
@@ -110,7 +134,10 @@
   margin-top: 4px;
 }
 .me-radical {
-  font: 33px 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    33px 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 .me-superscript > .me-slot:last-child {
   align-self: flex-start;
@@ -125,11 +152,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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 .me-suggestions {
   position: absolute;
@@ -260,7 +288,10 @@
   min-height: 54px;
 }
 .me-candidate-glyph {
-  font: 26px 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    26px 'Barocss Math Glyphs',
+    Georgia,
+    serif;
   min-width: 42px;
   flex-shrink: 0;
   text-align: center;
@@ -286,16 +317,22 @@
 }
 .me-limit .me-input,
 .me-limit .me-measure {
-  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+  font-size: max(var(--me-min-font-size, 14px), 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;
 }
 .me-delimiter {
-  font: 28px/1 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    28px/1 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 
 /* Slot roles are presentation metadata, not a claim that text is a variable or constant. */
@@ -593,7 +630,11 @@
   align-items: center;
   justify-content: center;
   white-space: pre;
-  font: italic var(--me-font-size, 22px) / 1.35 'Barocss Math Glyphs', Georgia, 'Times New Roman',
+  font:
+    italic max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) / 1.35
+      'Barocss Math Glyphs',
+    Georgia,
+    'Times New Roman',
     serif;
   color: var(--me-ink);
   border-radius: 4px;
@@ -616,10 +657,10 @@
 }
 .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: max(var(--me-min-font-size, 14px), 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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 .me-range-highlight,
 .me-empty[data-range-selected='true'] {
@@ -719,7 +760,11 @@
   border-color: var(--me-accent, #9cbbac);
 }
 .me-symbol-glyph {
-  font: 25px/1.2 'Barocss Math Glyphs', Georgia, 'Times New Roman', serif;
+  font:
+    25px/1.2 'Barocss Math Glyphs',
+    Georgia,
+    'Times New Roman',
+    serif;
 }
 .me-symbol-browser button:focus-visible,
 .me-symbol-search input:focus-visible {
@@ -767,11 +812,15 @@
 }
 .me-dom-editor[data-mode='inline'] {
   display: inline-block;
+  max-width: 100%;
+  box-sizing: border-box;
   vertical-align: middle;
   border: 0;
 }
 .me-dom-editor[data-mode='inline'] .me-surface {
   display: inline-block;
+  max-width: 100%;
+  box-sizing: border-box;
   padding: var(--me-inline-padding, 2px 4px);
   min-height: 0;
 }
@@ -804,7 +853,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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 
 .me-textGroup,
@@ -850,7 +899,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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
 }
 
 /* Accents follow the editable body's width, including nested structures. */
@@ -943,13 +992,16 @@
   gap: 4px;
 }
 .me-limit-glyph {
-  font: normal var(--me-font-size, 22px) / 1.1 'Barocss Math Glyphs', Georgia, serif;
+  font:
+    normal max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) / 1.1 'Barocss Math Glyphs',
+    Georgia,
+    serif;
 }
 .me-limit-operator > .me-limits {
   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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
   line-height: 1.1;
   padding-block: 1px;
 }
@@ -995,18 +1047,34 @@
 .me-superscript > .me-slot:last-child :is(.me-quad, .me-qquad),
 .me-subscript > .me-slot:last-child :is(.me-quad, .me-qquad),
 .me-scripts > .me-slot:not(:first-child) :is(.me-quad, .me-qquad) {
-  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
+  font-size: max(var(--me-min-font-size, 14px), 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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
 }
 
 /* Structured delimiters export as \left/\right and stretch with their body. */
+/* Fence bodies must not add an inline line box below their nested flex row. */
+:is(
+    .me-parentheses,
+    .me-brackets,
+    .me-absolute,
+    .me-braces,
+    .me-angle,
+    .me-openClosed,
+    .me-closedOpen,
+    .me-fenced,
+    .me-norm
+  )
+  > .me-slot {
+  display: inline-flex;
+  align-items: center;
+}
 :is(.me-parentheses, .me-brackets, .me-absolute) > .me-delimiter {
   align-self: stretch;
   flex: 0 0 7px;
   box-sizing: border-box;
-  min-height: 26px;
+  min-height: calc(var(--me-font-size, 22px) * 1.2);
   font-size: 0;
 }
 :is(.me-parentheses, .me-brackets, .me-absolute) > .me-delimiter:first-child {
@@ -1015,19 +1083,19 @@
 :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);
 }
-.me-parentheses:has(> .me-slot .me-structure) > .me-delimiter {
+.me-parentheses:has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > .me-delimiter {
   flex-basis: 14px;
 }
 .me-brackets > .me-delimiter {
@@ -1045,14 +1113,14 @@
 :is(.me-braces, .me-angle, .me-openClosed, .me-closedOpen, .me-fenced) > .me-delimiter {
   align-self: stretch;
   flex: 0 0 12px;
-  min-height: 26px;
+  min-height: calc(var(--me-font-size, 22px) * 1.2);
   box-sizing: border-box;
   font-size: 0;
 }
 :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=')'] {
@@ -1104,7 +1172,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: max(var(--me-min-font-size, 14px), 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,
@@ -1116,17 +1184,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;
@@ -1169,7 +1226,7 @@
   > .me-operator-glyph {
   grid-column: 1;
   grid-row: 1 / 3;
-  font-size: 44px;
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 2));
 }
 :is(
     [data-structure='integral'],
@@ -1229,11 +1286,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: max(var(--me-min-font-size, 14px), 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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
 }
 .me-fraction .me-fraction .me-row {
   min-height: 0;
@@ -1242,6 +1300,38 @@
   padding: 0 3px;
 }
 
+/* Resolve every fraction descendant from its own row style. Transparent
+   structures (norms, fences, roots) must not reset their body's term size.
+   The input, measuring twin and passive glyph share the same rule. */
+.me-editor .me-fraction .me-row[data-layout-style] {
+  min-height: 0;
+}
+.me-editor
+  .me-fraction
+  .me-row[data-layout-style]
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  padding-block: 0;
+  line-height: 1.25;
+  font-size: max(var(--me-min-font-size, 14px), var(--me-font-size, 22px));
+}
+.me-editor
+  .me-fraction
+  .me-row[data-layout-style='script']
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.1;
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
+}
+.me-editor
+  .me-fraction
+  .me-row[data-layout-style='scriptscript']
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.1;
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
+}
+
 .me-vec,
 .me-hat,
 .me-overline {
@@ -1271,7 +1361,7 @@
 .me-fenced > .me-delimiter[data-fence='‖'] {
   align-self: stretch;
   flex: 0 0 9px;
-  min-height: 26px;
+  min-height: calc(var(--me-font-size, 22px) * 1.2);
   box-sizing: border-box;
   font-size: 0;
   border-left: 4px double currentColor;
@@ -1288,9 +1378,11 @@
   unicode-range: U+222E;
 }
 [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;
+  font:
+    normal max(var(--me-min-font-size, 14px), var(--me-font-size, 22px)) / 2.3 'Barocss Contour',
+    serif;
+  width: calc(var(--me-font-size, 22px) * 25 / 22);
+  height: calc(var(--me-font-size, 22px) * 2.3);
   transform: none;
 }
 
@@ -1314,7 +1406,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: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
   line-height: 1.1;
 }
 :is(.me-overbrace, .me-underbrace) > .me-slot:last-child {
@@ -1322,20 +1414,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;
 }
@@ -1494,7 +1589,7 @@
   )[data-limit-placement='nolimits']
   > .me-limits
   > .me-operator-glyph {
-  font-size: 44px;
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 2));
 }
 
 /* TeX math units: 18mu = 1em. Negative spacing has no painted hit box. */
@@ -1529,13 +1624,13 @@
 /* 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) {
-  font-size: var(--me-explicit-size);
+.me-structure[data-math-style] > .me-slot :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: max(var(--me-min-font-size, 14px), var(--me-explicit-size));
 }
 .me-structure[data-math-style='text'] > .me-slot > .me-row {
   min-height: 0;
@@ -1547,7 +1642,7 @@
   :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-explicit-size) * 0.7273);
+  font-size: max(var(--me-min-font-size, 14px), calc(var(--me-explicit-size) * 0.7273));
 }
 
 /* Alphabet fonts are scoped to editable runs, never delimiter/operator glyphs.
@@ -1656,7 +1751,9 @@
 .me-utility-panel {
   padding: 12px;
   border-top: 1px solid var(--me-line, #dcdfe2);
-  font: 13px/1.5 system-ui, sans-serif;
+  font:
+    13px/1.5 system-ui,
+    sans-serif;
   color: var(--me-text, #253b33);
 }
 .me-utility-panel label {
@@ -1727,3 +1824,727 @@
   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: max(var(--me-min-font-size, 14px), 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: max(var(--me-min-font-size, 14px), 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-editor
+  .me-matrix[data-structure='matrix']
+  .me-fraction:not([data-math-style='display'])
+  > .me-slot
+  > .me-row
+  > .me-run
+  :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: max(var(--me-min-font-size, 14px), 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 max(var(--me-min-font-size, 14px), 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 :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced):has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > :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 {
+  display: inline-flex;
+  align-items: center;
+}
+: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-empty-boundary:not(:focus-within)
+  > .me-measure {
+  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: max(var(--me-min-font-size, 14px), 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;
+}
+.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 :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > .me-delimiter,
+:is(.me-openClosed, .me-closedOpen, .me-fenced):has(
+    > .me-slot :is(.me-fraction, .me-root, .me-indexedRoot, .me-matrix, .me-cases, .me-superscript)
+  )
+  > :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;
+}
+
+/* Radical geometry follows the containing math style, including the editing
+   minimum. The radicand's flex slot supplies extra height for tall contents. */
+.me-row {
+  --me-radical-size: max(var(--me-min-font-size, 14px), var(--me-font-size, 22px));
+}
+.me-row[data-layout-style='script'] {
+  --me-radical-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.7));
+}
+.me-row[data-layout-style='scriptscript'] {
+  --me-radical-size: max(var(--me-min-font-size, 14px), calc(var(--me-font-size, 22px) * 0.5));
+}
+.me-editor .me-row > :is(.me-root, .me-indexedRoot) > .me-radical {
+  width: calc(var(--me-radical-size) * 0.85);
+  min-height: var(--me-radical-size);
+  margin-top: calc(var(--me-radical-size) * 0.1);
+}
+.me-editor :is(.me-root, .me-indexedRoot) > .me-slot:last-child {
+  margin-top: calc(var(--me-radical-size) * 0.1);
+}
+
+/* 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-radical-size) * 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: max(var(--me-min-font-size, 14px), 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: max(var(--me-min-font-size, 14px), 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: max(var(--me-min-font-size, 14px), 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(max(var(--me-min-font-size, 14px), var(--me-font-size, 22px) * 0.7) / 18);
+}
+.me-row[data-layout-style='scriptscript'] {
+  --me-tight-unit: calc(max(var(--me-min-font-size, 14px), 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));
+}
+
+/* Help uses the top layer to avoid clipping inside narrow or embedded fields. */
+.me-help {
+  width: min(560px, calc(100vw - 40px));
+  max-height: calc(100vh - 48px);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 24px;
+  border: 1px solid var(--me-line, #dcdfe2);
+  border-radius: 12px;
+  background: var(--me-control-bg, #fff);
+  color: var(--me-text, #253b33);
+  text-align: start;
+}
+.me-help::backdrop {
+  background: rgb(0 0 0 / 25%);
+}
+.me-help h2 {
+  margin: 0 0 8px;
+  font:
+    600 20px/1.4 system-ui,
+    sans-serif;
+}
+.me-help dl {
+  display: grid;
+  gap: 8px 16px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+}
+.me-help dt {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.me-help dd {
+  margin: 0;
+}