@barocss/math-editor 0.1.0 → 0.2.0

package/src/style.css

@@ -1,3 +1,10 @@
+/* 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. */
+@font-face {
+  font-family: 'Barocss Math Glyphs';
+  src: url('./fonts/KaTeX_Main-Regular.woff2') format('woff2');
+  unicode-range: U+0030-0039, U+223C;
+}
 .me-editor {
   --me-accent: #236957;
   --me-line: #d9e1dd;
@@ -25,7 +32,7 @@
   font: 12px system-ui;
 }
 .me-tools button span {
-  font: 20px Georgia, serif;
+  font: 20px 'Barocss Math Glyphs', Georgia, serif;
 }
 .me-tools button:hover {
   background: #edf3ef;
@@ -63,7 +70,7 @@
 }
 .me-input,
 .me-measure {
-  font: italic 22px Georgia, 'Times New Roman', serif;
+  font: italic var(--me-font-size, 22px) 'Barocss Math Glyphs', Georgia, 'Times New Roman', serif;
   line-height: 1.35;
   min-width: 1ch;
   border: 0;
@@ -102,12 +109,17 @@
   margin-top: 4px;
 }
 .me-radical {
-  font: 33px Georgia, serif;
+  font: 33px 'Barocss Math Glyphs', Georgia, serif;
 }
 .me-superscript > .me-slot:last-child {
   align-self: flex-start;
   transform: translateY(-0.3em);
 }
+.me-superscript > .me-slot,
+.me-subscript > .me-slot {
+  /* Avoid the inline line-box descent below the base's flex row. */
+  display: inline-flex;
+}
 .me-subscript > .me-slot:last-child {
   align-self: flex-end;
   transform: translateY(0.3em);
@@ -116,7 +128,7 @@
 .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: 16px;
+  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
 }
 .me-suggestions {
   position: absolute;
@@ -220,7 +232,7 @@
   box-shadow: none;
   border: 0;
   border-radius: 0;
-  flex: 1;
+  flex: 1 1 auto;
 }
 .me-suggestion-panel .me-suggestions button {
   justify-content: flex-start;
@@ -230,7 +242,7 @@
   min-height: 54px;
 }
 .me-candidate-glyph {
-  font: 26px Georgia, serif;
+  font: 26px 'Barocss Math Glyphs', Georgia, serif;
   min-width: 42px;
   text-align: center;
 }
@@ -251,16 +263,16 @@
 }
 .me-limit .me-input,
 .me-limit .me-measure {
-  font-size: 14px;
+  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
 }
 .me-operator-glyph {
-  font: 35px/1 Georgia, serif;
+  font: 35px/1 'Barocss Math Glyphs', Georgia, serif;
 }
 .me-large-operator {
   gap: 8px;
 }
 .me-delimiter {
-  font: 28px/1 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. */
@@ -316,9 +328,8 @@
 }
 .me-input:focus {
   background: var(--me-focus);
-  outline: 2px solid var(--me-ring);
-  outline-offset: 1px;
-  box-shadow: 0 0 0 5px var(--me-tint);
+  outline: none;
+  box-shadow: none;
 }
 .me-input::selection {
   color: white;
@@ -354,8 +365,8 @@
   display: grid;
   align-items: center;
   justify-items: center;
-  gap: 12px 18px;
-  padding: 9px 7px;
+  gap: 4px 12px;
+  padding: 3px 5px;
 }
 .me-matrix-cell {
   min-width: 1.4ch;
@@ -559,7 +570,8 @@
   align-items: center;
   justify-content: center;
   white-space: pre;
-  font: italic 22px/1.35 Georgia, 'Times New Roman', serif;
+  font: italic var(--me-font-size, 22px) / 1.35 'Barocss Math Glyphs', Georgia, 'Times New Roman',
+    serif;
   color: var(--me-ink);
   border-radius: 4px;
   cursor: text;
@@ -581,10 +593,10 @@
 }
 .me-superscript > .me-slot:last-child .me-preview-token,
 .me-subscript > .me-slot:last-child .me-preview-token {
-  font-size: 16px;
+  font-size: calc(var(--me-font-size, 22px) * 16 / 22);
 }
 .me-limit .me-preview-token {
-  font-size: 14px;
+  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
 }
 .me-range-highlight,
 .me-empty[data-range-selected='true'] {
@@ -599,33 +611,6 @@
   outline: 2px solid #3676d3;
   outline-offset: -2px;
 }
-.me-wrap-tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  padding: 8px 16px;
-  background: #eef5ff;
-  color: #245da1;
-  font: 12px system-ui;
-  border-bottom: 1px solid var(--me-line);
-}
-.me-wrap-tools button {
-  font: inherit;
-  color: inherit;
-  border: 1px solid #b9cee7;
-  background: white;
-  border-radius: 5px;
-  padding: 6px 10px;
-  cursor: pointer;
-}
-.me-wrap-tools button:hover {
-  background: #dbeaff;
-}
-.me-wrap-tools button:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
 .me-line-number {
   flex: 0 0 2.5ch;
   margin-right: 16px;
@@ -711,7 +696,7 @@
   border-color: #9cbbac;
 }
 .me-symbol-glyph {
-  font: 25px/1.2 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 {
@@ -779,3 +764,841 @@
 .me-dom-editor[data-mode='inline'] .me-document-line {
   min-height: 0;
 }
+
+/* Combined scripts share a column, while the base spans both script rows. */
+.me-scripts {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  vertical-align: middle;
+  gap: 0;
+}
+.me-scripts > .me-slot:nth-child(1) {
+  grid-column: 1;
+  grid-row: 1 / 3;
+  align-self: center;
+}
+.me-scripts > .me-slot:nth-child(2) {
+  grid-column: 2;
+  grid-row: 2;
+}
+.me-scripts > .me-slot:nth-child(3) {
+  grid-column: 2;
+  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);
+}
+
+.me-textGroup,
+.me-operatorName {
+  font-style: normal;
+}
+.me-operatorName {
+  margin-inline-end: 0.16em;
+}
+.me-textGroup :is(.me-input, .me-preview-token, .me-measure),
+.me-operatorName :is(.me-input, .me-preview-token, .me-measure) {
+  font-family: 'Barocss Math Glyphs', Georgia, serif;
+  font-style: normal;
+  white-space: pre;
+  color: #263b32;
+}
+.me-textGroup .me-preview-token *,
+.me-operatorName .me-preview-token * {
+  color: inherit;
+}
+
+.me-indexedRoot {
+  display: inline-grid;
+  grid-template-columns: auto auto auto;
+  align-items: center;
+  gap: 0;
+}
+.me-indexedRoot > .me-radical {
+  grid-column: 2;
+  grid-row: 1;
+}
+.me-indexedRoot > .me-slot:nth-last-child(2) {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  margin-right: -3px;
+  z-index: 1;
+}
+.me-indexedRoot > .me-slot:last-child {
+  grid-column: 3;
+  grid-row: 1;
+  border-top: 1.5px solid currentColor;
+  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);
+}
+
+/* Accents follow the editable body's width, including nested structures. */
+.me-vec,
+.me-hat,
+.me-overline {
+  position: relative;
+  padding-top: 0.3em;
+}
+.me-vec::before,
+.me-overline::before {
+  content: '';
+  position: absolute;
+  top: 0.16em;
+  left: 0;
+  right: 0;
+  border-top: 1.5px solid currentColor;
+  pointer-events: none;
+}
+.me-vec::after {
+  content: '';
+  position: absolute;
+  right: 1px;
+  top: calc(0.16em - 2px);
+  width: 4px;
+  height: 4px;
+  border-top: 1.5px solid currentColor;
+  border-right: 1.5px solid currentColor;
+  transform: rotate(45deg);
+  pointer-events: none;
+}
+.me-hat::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 0.28em;
+  background: currentColor;
+  clip-path: polygon(0 100%, 50% 0, 100% 100%, 90% 100%, 50% 32%, 10% 100%);
+  pointer-events: none;
+}
+
+/* A binomial stacks two editable terms; curved sides grow with nested content. */
+.me-binomial {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 2px 7px;
+  border-left: 1.5px solid currentColor;
+  border-right: 1.5px solid currentColor;
+  border-radius: 45% / 50%;
+}
+.me-binomial > .me-slot {
+  padding: 1px 3px;
+}
+
+/* Model boundary nodes are caret targets, not mathematical whitespace.
+   Expand only the target being edited; real empty slots retain their hit area. */
+.me-empty-boundary:not(:focus-within) > .me-measure {
+  min-width: 4px;
+  width: 4px;
+  padding-inline: 0;
+}
+.me-operatorName {
+  margin-inline-start: 0;
+}
+.me-textGroup,
+.me-subscript,
+.me-superscript {
+  margin-inline: 0;
+}
+/* Structural caret boundaries must not detach a script from its base.
+   The active boundary still expands to its normal editable width. */
+:is(.me-subscript, .me-superscript, .me-scripts)
+  > .me-slot:first-child
+  > .me-row
+  > .me-empty-boundary:not(:focus-within)
+  > .me-measure {
+  min-width: 1px;
+  width: 1px;
+}
+.me-subscript > .me-slot:first-child .me-operatorName,
+.me-superscript > .me-slot:first-child .me-operatorName,
+.me-scripts > .me-slot:first-child .me-operatorName {
+  margin-inline-end: 0;
+}
+
+.me-limit-operator {
+  align-items: flex-start;
+  gap: 4px;
+}
+.me-limit-glyph {
+  font: normal 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);
+  line-height: 1.1;
+  padding-block: 1px;
+}
+/* Keep the condition close to lim without an inherited text-line strut.
+   Nested structures still determine their own required height. */
+.me-limit-operator > .me-limits > .me-limit {
+  display: inline-flex;
+}
+.me-limit-operator > .me-limits > .me-limit > .me-row {
+  min-height: 0;
+}
+
+/* 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);
+}
+
+/* Explicit LaTeX spacing is content, independent of empty caret hit areas. */
+.me-quad,
+.me-qquad {
+  flex: 0 0 auto;
+  width: 1em;
+  min-height: 1.35em;
+  margin: 0;
+  font-size: 22px;
+}
+.me-qquad {
+  width: 2em;
+}
+.me-quad:hover,
+.me-qquad:hover {
+  background: var(--me-focus);
+}
+
+.me-roman :is(.me-input, .me-measure, .me-preview-token) {
+  font-style: normal;
+}
+.me-roman .me-preview-token * {
+  font-style: normal;
+}
+.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);
+}
+.me-limit :is(.me-quad, .me-qquad) {
+  font-size: calc(var(--me-font-size, 22px) * 14 / 22);
+}
+
+/* Structured delimiters export as \left/\right and stretch with their body. */
+:is(.me-parentheses, .me-brackets, .me-absolute) > .me-delimiter {
+  align-self: stretch;
+  flex: 0 0 7px;
+  box-sizing: border-box;
+  min-height: 26px;
+  font-size: 0;
+}
+:is(.me-parentheses, .me-brackets, .me-absolute) > .me-delimiter:first-child {
+  border-left: 1.5px solid currentColor;
+}
+: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. */
+.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 {
+  flex-basis: 14px;
+}
+.me-brackets > .me-delimiter {
+  border-top: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+}
+/* Leave room between the editable operand and each absolute-value bar. */
+.me-absolute > .me-delimiter {
+  flex-basis: 7px;
+  position: relative;
+  z-index: 1;
+}
+
+/* Additional fences have independent ends, including invisible ends. */
+:is(.me-braces, .me-angle, .me-openClosed, .me-closedOpen, .me-fenced) > .me-delimiter {
+  align-self: stretch;
+  flex: 0 0 12px;
+  min-height: 26px;
+  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")
+    center / 100% 100% no-repeat;
+}
+.me-delimiter[data-fence=')'] {
+  transform: scaleX(-1);
+}
+:is(.me-openClosed, .me-closedOpen, .me-fenced) > :is([data-fence='['], [data-fence=']']) {
+  flex-basis: 7px;
+  border-block: 1.5px solid currentColor;
+}
+.me-delimiter[data-fence='['] {
+  border-left: 1.5px solid currentColor;
+}
+.me-delimiter[data-fence=']'] {
+  border-right: 1.5px solid currentColor;
+}
+.me-delimiter:is([data-fence='⟨'], [data-fence='⟩']) {
+  background: currentColor;
+  clip-path: polygon(100% 0, 18% 50%, 100% 100%, 82% 100%, 0 50%, 82% 0);
+}
+.me-delimiter[data-fence='⟩'] {
+  transform: scaleX(-1);
+}
+.me-delimiter:is([data-fence='{'], [data-fence='}']),
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter,
+.me-matrix[data-structure='cases'] > .me-matrix-left {
+  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 0Q6 0 6 15L6 35Q6 47 0 50Q6 53 6 65L6 85Q6 100 14 100L14 97Q9 96 9 85L9 65Q9 53 4 50Q9 47 9 35L9 15Q9 4 14 3Z'/%3E%3C/svg%3E")
+    center / 100% 100% no-repeat;
+}
+.me-delimiter[data-fence='}'] {
+  transform: scaleX(-1);
+}
+.me-fenced > [data-fence='|'] {
+  flex-basis: 3px;
+  border-left: 1.5px solid currentColor;
+}
+.me-fenced > [data-fence='.'] {
+  flex-basis: 0;
+  width: 0;
+}
+.me-overset,
+.me-underset {
+  flex-direction: column;
+  gap: 0;
+}
+.me-underset {
+  flex-direction: column-reverse;
+}
+: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);
+}
+/* Square and indexed roots share a radical joined to the radicand's overbar. */
+.me-root > .me-radical,
+.me-indexedRoot > .me-radical {
+  align-self: stretch;
+  flex-shrink: 0;
+  width: 24px;
+  min-height: 30px;
+  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;
+  margin-top: -2px;
+}
+
+/* Match the right-leaning integral form without tilting bounds or the integrand. */
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )
+  > .me-limits
+  > .me-operator-glyph {
+  transform: skewX(-12deg);
+  transform-origin: center;
+}
+
+/* Integral bounds sit beside the slanted glyph unless LaTeX requests limits. */
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement='auto']
+  > .me-limits {
+  display: inline-grid;
+  grid-template-columns: max-content max-content;
+  grid-template-rows: auto auto;
+  align-items: center;
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement='auto']
+  > .me-limits
+  > .me-operator-glyph {
+  grid-column: 1;
+  grid-row: 1 / 3;
+  font-size: 44px;
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement='auto']
+  > .me-limits
+  > .me-limit:first-child {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: start;
+  margin-left: 5px;
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral'],
+    [data-structure='contourIntegral']
+  )[data-limit-placement='auto']
+  > .me-limits
+  > .me-limit:last-child {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: start;
+  margin-left: -3px;
+}
+
+/* Grid fences share the scalable glyphs used by ordinary grouped expressions. */
+.me-matrix:is([data-environment='pmatrix'], [data-environment='Bmatrix'], [data-structure='cases'])
+  > .me-matrix-delimiter {
+  border: 0;
+  border-radius: 0;
+  width: 10px;
+  flex-shrink: 0;
+}
+.me-matrix[data-environment='pmatrix'] > .me-matrix-right {
+  transform: scaleX(-1);
+}
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter::before,
+.me-matrix[data-environment='Bmatrix'] > .me-matrix-delimiter::after {
+  content: none;
+}
+
+/* Eliminate inline line-box descent around vertically stacked math rows. */
+:is(.me-fraction, .me-scripts, .me-vec, .me-hat, .me-overline) > .me-slot {
+  display: inline-flex;
+  justify-content: center;
+}
+.me-scripts > .me-slot:not(:first-child) > .me-row {
+  min-height: 0;
+}
+.me-scripts > .me-slot:not(:first-child) :is(.me-input, .me-measure, .me-preview-token) {
+  line-height: 1.1;
+  padding-block: 1px;
+}
+/* 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;
+}
+.me-fraction .me-fraction .me-fraction :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: 12px;
+}
+.me-fraction .me-fraction .me-row {
+  min-height: 0;
+}
+.me-fraction > .me-slot {
+  padding: 0 3px;
+}
+
+.me-vec,
+.me-hat,
+.me-overline {
+  padding-top: 0.1em;
+}
+.me-vec::before,
+.me-overline::before {
+  top: 0.32em;
+}
+.me-vec::after {
+  top: calc(0.32em - 2px);
+}
+.me-hat::before {
+  top: 0.18em;
+}
+.me-large-operator {
+  gap: 4px;
+}
+/* Only structural boundaries shrink; genuinely empty expression slots stay roomy. */
+.me-empty-boundary:focus-within > .me-measure {
+  min-width: 12px;
+  padding-inline: 0;
+}
+
+/* Norm fences stay outside the editable body and stretch with nested content. */
+.me-norm > .me-delimiter,
+.me-fenced > .me-delimiter[data-fence='‖'] {
+  align-self: stretch;
+  flex: 0 0 9px;
+  min-height: 26px;
+  box-sizing: border-box;
+  font-size: 0;
+  border-left: 4px double currentColor;
+}
+.me-norm > .me-delimiter:last-child {
+  border-left: 0;
+  border-right: 4px double currentColor;
+}
+
+/* KaTeX's display-size contour glyph already contains its ring and slant. */
+@font-face {
+  font-family: 'Barocss Contour';
+  src: url('./fonts/KaTeX_Size2-Regular.woff2') format('woff2');
+  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;
+  transform: none;
+}
+
+/* Brace annotations share annotation/body slot order with overset/underset. */
+.me-overbrace,
+.me-underbrace {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.me-underbrace {
+  flex-direction: column-reverse;
+}
+:is(.me-overbrace, .me-underbrace) > .me-slot {
+  display: inline-flex;
+  justify-content: center;
+}
+:is(.me-overbrace, .me-underbrace) > .me-slot:first-child > .me-row {
+  min-height: 0;
+}
+: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);
+  line-height: 1.1;
+}
+:is(.me-overbrace, .me-underbrace) > .me-slot:last-child {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.me-overbrace > .me-slot:last-child {
+  padding-top: 9px;
+}
+.me-underbrace > .me-slot:last-child {
+  padding-bottom: 9px;
+}
+:is(.me-overbrace, .me-underbrace) > .me-slot:last-child::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 8px;
+  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")
+    center / 100% 100% no-repeat;
+  pointer-events: none;
+}
+.me-underbrace > .me-slot:last-child::before {
+  top: auto;
+  bottom: 0;
+  transform: scaleY(-1);
+}
+
+/* Toolbar overflow is a control, visually distinct from notation commands. */
+.me-tools .me-toolbar-toggle {
+  min-height: 32px;
+  padding: 7px 12px;
+  gap: 9px;
+  border: 1px solid #b8cec3;
+  border-radius: 7px;
+  background: #edf4ef;
+  color: #245443;
+  font-weight: 600;
+  white-space: nowrap;
+}
+.me-tools .me-toolbar-toggle::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(-2px) rotate(45deg);
+}
+.me-tools .me-toolbar-toggle[aria-expanded='true']::after {
+  transform: translateY(2px) rotate(225deg);
+}
+.me-tools .me-toolbar-toggle:hover {
+  background: #dfece4;
+  border-color: #8fac9c;
+}
+.me-tools .me-toolbar-toggle[aria-expanded='true'] {
+  background: #dfece4;
+}
+.me-tools .me-toolbar-toggle:focus-visible {
+  outline-offset: 2px;
+}
+
+/* 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;
+  padding-top: 5px;
+}
+:is(.me-tilde, .me-bar, .me-dot, .me-ddot, .me-widehat, .me-widetilde) > .me-slot {
+  display: inline-flex;
+}
+:is(.me-tilde, .me-bar, .me-dot, .me-ddot, .me-widehat, .me-widetilde)::before {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  transform: translateX(-50%);
+  height: 5px;
+  width: 14px;
+  background: currentColor;
+  pointer-events: none;
+}
+.me-bar::before {
+  height: 1.5px;
+  top: 9px;
+}
+.me-dot::before {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  top: 8px;
+}
+.me-ddot::before {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  top: 8px;
+  margin-left: -3px;
+  box-shadow: 6px 0 currentColor;
+}
+.me-widehat::before {
+  width: 100%;
+  clip-path: polygon(0 100%, 50% 0, 100% 100%, 90% 100%, 50% 32%, 10% 100%);
+}
+.me-widetilde::before {
+  width: 100%;
+}
+:is(.me-tilde, .me-widetilde)::before {
+  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 9C20 -8 35 0 50 5S80 15 100 0L100 4C80 21 65 13 50 9S20 -1 0 12Z'/%3E%3C/svg%3E")
+    center / 100% 100% no-repeat;
+}
+
+/* Explicit nolimits places scripts beside every supported large operator. */
+.me-large-operator[data-limit-placement='nolimits'] > .me-limits {
+  display: inline-grid;
+  grid-template-columns: max-content max-content;
+  grid-template-rows: auto auto;
+  align-items: center;
+}
+.me-large-operator[data-limit-placement='nolimits'] > .me-limits > .me-operator-glyph {
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+.me-large-operator[data-limit-placement='nolimits'] > .me-limits > .me-limit:first-child {
+  grid-column: 2;
+  grid-row: 1;
+  margin-left: 5px;
+}
+.me-large-operator[data-limit-placement='nolimits'] > .me-limits > .me-limit:last-child {
+  grid-column: 2;
+  grid-row: 2;
+  margin-left: 0;
+}
+.me-limit-operator[data-limit-placement='nolimits'] > .me-limits {
+  flex-direction: row;
+  align-items: baseline;
+  gap: 2px;
+}
+.me-limit-operator[data-limit-placement='nolimits'] > .me-limits > .me-limit {
+  transform: translateY(0.3em);
+}
+:is(
+    [data-structure='integral'],
+    [data-structure='doubleIntegral'],
+    [data-structure='tripleIntegral']
+  )[data-limit-placement='nolimits']
+  > .me-limits
+  > .me-operator-glyph {
+  font-size: 44px;
+}
+
+/* TeX math units: 18mu = 1em. Negative spacing has no painted hit box. */
+:is(.me-thinSpace, .me-mediumSpace, .me-thickSpace, .me-negativeThinSpace) {
+  flex: 0 0 auto;
+  margin: 0;
+  min-height: 1em;
+  font-size: 22px;
+}
+.me-thinSpace {
+  width: calc(1em / 6);
+}
+.me-mediumSpace {
+  width: calc(2em / 9);
+}
+.me-thickSpace {
+  width: calc(5em / 18);
+}
+.me-negativeThinSpace {
+  width: 0;
+  margin-inline-end: calc(-1em / 6);
+}
+:is(.me-superscript, .me-subscript, .me-scripts)
+  > .me-slot:not(:first-child)
+  :is(.me-thinSpace, .me-mediumSpace, .me-thickSpace, .me-negativeThinSpace) {
+  font-size: 16px;
+}
+.me-limit :is(.me-thinSpace, .me-mediumSpace, .me-thickSpace, .me-negativeThinSpace) {
+  font-size: 14px;
+}
+
+/* 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-structure[data-math-style='text'] {
+  --me-explicit-size: 16px;
+}
+.me-structure[data-math-style] :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: var(--me-explicit-size);
+}
+.me-structure[data-math-style='text'] > .me-slot > .me-row {
+  min-height: 0;
+}
+.me-structure[data-math-style='text'] > .me-slot {
+  padding-block: 0;
+}
+.me-structure[data-math-style]
+  :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);
+}
+
+/* Alphabet fonts are scoped to editable runs, never delimiter/operator glyphs.
+   Restrict decorative faces to their supported Latin capitals. */
+@font-face {
+  font-family: 'Barocss Bold';
+  src: url('./fonts/KaTeX_Main-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Barocss Calligraphic';
+  src: url('./fonts/KaTeX_Caligraphic-Regular.woff2') format('woff2');
+  unicode-range: U+0041-005A;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Barocss Blackboard';
+  src: url('./fonts/KaTeX_AMS-Regular.woff2') format('woff2');
+  unicode-range: U+0041-005A;
+  font-display: swap;
+}
+.me-bold {
+  --me-alphabet: 'Barocss Bold', Georgia, serif;
+  --me-alphabet-weight: 700;
+}
+.me-calligraphic {
+  --me-alphabet: 'Barocss Calligraphic', Georgia, serif;
+  --me-alphabet-weight: 400;
+}
+.me-blackboard {
+  --me-alphabet: 'Barocss Blackboard', Georgia, serif;
+  --me-alphabet-weight: 400;
+}
+.me-roman {
+  --me-alphabet: Georgia, serif;
+  --me-alphabet-weight: 400;
+}
+:is(.me-bold, .me-calligraphic, .me-blackboard, .me-roman)
+  :is(.me-input, .me-measure, .me-preview-token, .me-preview-token *) {
+  font-family: var(--me-alphabet);
+  font-weight: var(--me-alphabet-weight);
+  font-style: normal;
+}
+:is(.me-bold, .me-calligraphic, .me-blackboard, .me-roman) {
+  margin-inline: 0;
+}
+
+/* Labels determine the shaft width; the arrow itself occupies the middle row. */
+:is(.me-xrightarrow, .me-xleftarrow) {
+  display: inline-grid;
+  grid-template-columns: minmax(36px, auto);
+  grid-template-rows: auto 9px auto;
+  align-items: center;
+  vertical-align: middle;
+}
+:is(.me-xrightarrow, .me-xleftarrow) > .me-slot {
+  display: inline-flex;
+  justify-content: center;
+  padding-inline: 7px;
+}
+:is(.me-xrightarrow, .me-xleftarrow) > .me-slot:first-child {
+  grid-area: 1 / 1;
+}
+:is(.me-xrightarrow, .me-xleftarrow) > .me-slot:last-child {
+  grid-area: 3 / 1;
+}
+:is(.me-xrightarrow, .me-xleftarrow) > .me-slot > .me-row {
+  min-height: 0;
+}
+:is(.me-xrightarrow, .me-xleftarrow) > .me-slot :is(.me-input, .me-measure, .me-preview-token) {
+  font-size: 14px;
+  line-height: 1.1;
+}
+:is(.me-xrightarrow, .me-xleftarrow)::before {
+  content: '';
+  grid-area: 2 / 1;
+  width: 100%;
+  height: 9px;
+  background: currentColor;
+  height: 1.2px;
+  pointer-events: none;
+}
+/* Keep the head a fixed size even when a label makes the shaft much longer. */
+:is(.me-xrightarrow, .me-xleftarrow)::after {
+  content: '';
+  grid-area: 2 / 1;
+  justify-self: end;
+  width: 7px;
+  height: 9px;
+  background: currentColor;
+  clip-path: polygon(0 0, 100% 50%, 0 100%, 32% 50%);
+  pointer-events: none;
+}
+.me-xleftarrow::after {
+  justify-self: start;
+  transform: scaleX(-1);
+}