.mt-viz { position: relative; margin-top: 2px; }
.mt-viz-cap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.vz-color-chip { width: 26px; height: 26px; min-width: 26px; border-radius: 6px; border: 1.5px solid rgba(34, 32, 27, 0.35); padding: 0; cursor: pointer; align-self: flex-end; }
.mt-viz-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.mt-viz-panes > .mt-viz-pane { min-width: 0; }
.mt-viz-panes > .mt-viz-pane > .mt-viz { margin-top: 0; }
.mt-viz-link { margin-top: 12px; padding-top: 11px; border-top: 1px dashed #d1d5db; text-align: center; font-size: 17px; font-weight: 500; color: #374151; }
.vz-piece:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
@media (max-width: 560px) { .mt-viz-panes { grid-template-columns: 1fr; gap: 22px; } }
@media (prefers-reduced-motion: reduce) { .vz-piece { transition: none !important; } }
body.dark-mode .vz-color-chip { border-color: rgba(255, 255, 255, 0.3); }
.viz-frame { position: relative; border: none; border-radius: 0; padding: 4px 0; background: transparent; }
.viz-frame-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.viz-frame-head.untitled { position: absolute; top: 0; right: 0; margin: 0; z-index: 1; }
.viz-frame-title { font-size: 17px; font-weight: 600; color: #22201B; }
.mt-tbar { display: flex; align-items: center; gap: 4px; padding: 0; background: transparent; border: none; align-self: flex-start; }
.mt-tbar button, .viz-frame-reset { width: 32px; height: 32px; padding: 0; font-size: 13px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #475569; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mt-tbar button:hover, .viz-frame-reset:hover { background: #f3f4f6; color: #111827; }
.mt-frac, .mt-frac-n, .mt-frac-d, .mt-frac-rule { flex: none !important; }
.mt-frac { display: inline-flex !important; flex-direction: column !important; align-items: center; vertical-align: middle; position: relative; top: -0.11em; margin: 0 3px; line-height: 1.05; }
.mt-frac-n, .mt-frac-d { display: block !important; font-size: 1em !important; line-height: 1 !important; font-weight: 600; }
.mt-frac-rule { display: block !important; align-self: stretch; min-width: 12px; height: 1.5px; background: currentColor; margin: 1px 0; }
.mt-viz [data-edit][data-ready] { display: inline-block; min-width: 24px; text-align: center; box-sizing: border-box; }
.mt-btn { font: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; min-height: 32px; min-width: 32px; padding: 4px 12px; white-space: nowrap; border-radius: 8px; border: 1.5px solid #D1D5DB; background: #fff; color: #22201B; cursor: pointer; box-sizing: border-box; }
.mt-btn:hover:not(:disabled) { background: #f3f4f6; }
.mt-btn[aria-pressed="true"] { border-color: #3B82F6; background: #DBEAFE; }
.mt-tbar button:disabled, .mt-btn:disabled { opacity: 0.45; cursor: default; }
.mt-input { font: inherit; font-size: 17px; font-weight: 600; width: 88px; height: 32px; padding: 0 8px; box-sizing: border-box; text-align: center; border: 1.5px solid #D1D5DB; border-radius: 8px; background: #fff; color: #22201B; }
@media (pointer: coarse) { .mt-input { font-size: 17px; } }
.mt-input:focus-visible { outline: 2px solid #3B82F6; outline-offset: 2px; }
.mt-viz [hidden] { display: none !important; }
.mt-tbar button i { font-size: 20px; line-height: 1; color: #2563EB; }
.viz-frame-reset i { font-size: 20px; line-height: 1; }
.mt-btn i { font-size: 20px; line-height: 1; vertical-align: -3px; color: #2563EB; }
.mt-btn svg.mt-icon { width: 17px; height: 17px; vertical-align: -3px; color: #2563EB; flex: none; }
.mt-graph math-field::part(virtual-keyboard-toggle), .mt-graph math-field::part(menu-toggle) { display: none; }
.mt-graph math-field { --caret-color: #2563EB; --selection-background-color: #DBEAFE; --contains-highlight-background-color: transparent; }
.mt-graph math-field:focus-within { outline: none; }
.mt-graph input[type=range] { height: 32px; accent-color: #2563EB; }
.mt-graph .JXGinfobox { display: none !important; }