{"id":2704,"date":"2026-02-18T14:28:00","date_gmt":"2026-02-18T14:28:00","guid":{"rendered":"https:\/\/www.mathros.net.ua\/en\/?page_id=2704"},"modified":"2026-02-18T14:29:03","modified_gmt":"2026-02-18T14:29:03","slug":"inverse-of-a-matrix-calculator-using-the-bordering-method","status":"publish","type":"page","link":"https:\/\/www.mathros.net.ua\/en\/inverse-of-a-matrix-calculator-using-the-bordering-method","title":{"rendered":"Inverse of a Matrix Calculator: Sequential Bordering Method Online"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2704\" class=\"elementor elementor-2704\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f88978 e-flex e-con-boxed e-con e-parent\" data-id=\"4f88978\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e7c43b elementor-widget elementor-widget-html\" data-id=\"4e7c43b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"h2-title\">Need the Inverse of a Matrix via Sequential Bordering? This Online Calculator Shows How You Add One Row and One Column\u2014Step by Step<\/h2>\n<style>\n    \/* h2 \u2014 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0439, \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0438\u0439, \u0431\u0435\u0437 \u0440\u0430\u043c\u043e\u043a *\/\n.h2-title {\n  \/* \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0456\u043a\u0430 *\/\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\n  font-weight: 800;\n  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.65rem); \/* ~19px\u201326px \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e *\/\n  line-height: 1.3;\n  letter-spacing: .005em;\n\n  \/* \u043a\u043e\u043b\u0456\u0440 (\u043a\u0440\u0430\u0449\u0435 \u0437\u0430 \u00ab\u0441\u0456\u0440\u0438\u0439\u00bb \u0437 \u0442\u043e\u0447\u043a\u0438 \u0437\u043e\u0440\u0443 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u0443) *\/\n  color: #334155; \/* slate-700 *\/\n\n  \/* \u043c\u0430\u043a\u0435\u0442 \u0456 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u0456\u0441\u0442\u044c *\/\n  text-align: center;\n  max-width: 800px;              \/* \u0432\u0438\u0440\u0456\u0432\u043d\u044f\u0442\u0438 \u0437 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0440\u0456\u0448\u0435\u043d\u043d\u044f *\/\n  margin: 10px auto 16px;        \/* \u0446\u0435\u043d\u0442\u0440 \u0456 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0438 *\/\n  padding: 0;                    \/* \u0431\u0435\u0437 \u0432\u043d\u0443\u0442\u0440\u0456\u0448\u043d\u0456\u0445 \u0432\u0456\u0434\u0441\u0442\u0443\u043f\u0456\u0432 (\u0440\u0430\u043c\u043a\u0438 \u043d\u0435 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u0456) *\/\n  text-wrap: balance;            \/* \u0440\u0456\u0432\u043d\u043e\u043c\u0456\u0440\u043d\u0456 \u0440\u044f\u0434\u043a\u0438 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 *\/\n  hyphens: auto;                 \/* \u043c\u2019\u044f\u043a\u0456 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438 \u0434\u043b\u044f \u0434\u043e\u0432\u0433\u0438\u0445 \u0441\u043b\u0456\u0432 *\/\n  word-break: normal;\n  overflow-wrap: anywhere;       \/* \u043d\u0435 \u0434\u0430\u0454 \u0432\u0438\u043b\u0430\u0437\u0438\u0442\u0438 \u0434\u043e\u0432\u0433\u0438\u043c \u0442\u043e\u043a\u0435\u043d\u0430\u043c *\/\n}\n\n\/* \u0422\u0435\u043c\u043d\u0430 \u0442\u0435\u043c\u0430 *\/\n@media (prefers-color-scheme: dark) {\n  .h2-title {\n    color: #e2e8f0; \/* slate-200 *\/\n  }\n}\n\n\/* \u041f\u043b\u0430\u043d\u0448\u0435\u0442\u0438 *\/\n@media (max-width: 768px) {\n  .h2-title {\n    margin: 8px auto 14px;\n  }\n}\n\n\/* \u0422\u0435\u043b\u0435\u0444\u043e\u043d\u0438 *\/\n@media (max-width: 480px) {\n  .h2-title {\n    font-size: clamp(1.05rem, 0.95rem + 2vw, 1.35rem); \/* \u0442\u0440\u043e\u0445\u0438 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0456\u0448\u0435 *\/\n    line-height: 1.35;\n    margin: 6px auto 12px;\n  }\n}\n\n\/* \u042f\u043a\u0449\u043e \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0432\u0430\u0447 \u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043c\u0435\u043d\u0448\u0435 \u0430\u043d\u0456\u043c\u0430\u0446\u0456\u0439 *\/\n@media (prefers-reduced-motion: reduce) {\n  .h2-title { scroll-behavior: auto; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a191e9 elementor-widget elementor-widget-html\" data-id=\"6a191e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- MathJax v2 (\u044f\u043a \u0443 \u0432\u0430\u0441) -->\r\n<script type=\"text\/javascript\" async\r\n  src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjax\/2.7.7\/MathJax.js?config=TeX-MML-AM_CHTML\">\r\n<\/script>\r\n\r\n<!-- ======================== HTML ======================== -->\r\n<div class=\"calculator-container inverse-ui\">\r\n  <div class=\"matrix-controls\">\r\n      <div class=\"matrix-controls__item\">\r\n          <label for=\"matrixSize\">Matrix dimensions<\/label>\r\n          <select id=\"matrixSize\" name=\"matrixSize\">\r\n            <option value=\"2\">2\u00d72<\/option>\r\n            <option value=\"3\" selected>3\u00d73<\/option>\r\n            <option value=\"4\">4\u00d74<\/option>\r\n            <option value=\"5\">5\u00d75<\/option>\r\n            <option value=\"6\">6\u00d76<\/option>\r\n            <option value=\"7\">7\u00d77<\/option>\r\n            <option value=\"8\">8\u00d78<\/option>\r\n          <\/select>\r\n      <\/div>\r\n\r\n      <!-- \u2705 New control: auto row\/column swap (for your snippet) -->\r\n      <div class=\"matrix-controls__item\">\r\n          <label for=\"autoPermuteToggle\">Auto swap rows\/columns<\/label>\r\n          <label class=\"toggle\" for=\"autoPermuteToggle\">\r\n            <input id=\"autoPermuteToggle\" type=\"checkbox\" checked \/>\r\n            <span class=\"toggle__track\" aria-hidden=\"true\"><\/span>\r\n            <span class=\"toggle__label\">On<\/span>\r\n          <\/label>\r\n      <\/div>\r\n      \r\n      <!-- Buttons -->\r\n      <div class=\"matrix-controls__item matrix-controls__item--actions\">\r\n          <label class=\"sr-only\" for=\"fillRandomBtn\">Actions<\/label>\r\n          <div class=\"matrix-actions\">\r\n            <button id=\"clearMatrixBtn\" type=\"button\" class=\"btn-secondary\">Clear<\/button>\r\n            <button id=\"fillRandomBtn\" type=\"button\" class=\"btn-secondary\">Fill randomly<\/button>\r\n          <\/div>\r\n      <\/div>\r\n  <\/div>\r\n  \r\n  <!-- Random fill settings -->\r\n  <details class=\"random-settings\">\r\n    <summary>Random fill settings<\/summary>\r\n    <div class=\"random-settings__grid\">\r\n      <div class=\"random-settings__item\">\r\n        <label for=\"randMin\">Minimum<\/label>\r\n        <input id=\"randMin\" type=\"text\" value=\"-5\" inputmode=\"numeric\" \/>\r\n      <\/div>\r\n      <div class=\"random-settings__item\">\r\n        <label for=\"randMax\">Maximum<\/label>\r\n        <input id=\"randMax\" type=\"text\" value=\"5\" inputmode=\"numeric\" \/>\r\n      <\/div>\r\n      <div class=\"random-settings__item\">\r\n        <label for=\"randDecimals\">Digits after the decimal point<\/label>\r\n        <select id=\"randDecimals\">\r\n          <option value=\"0\" selected>0<\/option>\r\n          <option value=\"1\">1<\/option>\r\n          <option value=\"2\">2<\/option>\r\n          <option value=\"3\">3<\/option>\r\n        <\/select>\r\n      <\/div>\r\n    <\/div>\r\n  <\/details>\r\n\r\n  <table id=\"matrixTable\" aria-label=\"Matrix element input grid\"><\/table>\r\n\r\n  <button id=\"generate-button\" type=\"button\">Find the inverse of a matrix<\/button>\r\n<\/div>\r\n\r\n<div id=\"fcontainer\" class=\"solution-container\" style=\"display:none;\"><\/div>\r\n<div id=\"error-block\" class=\"error-message\" role=\"alert\" aria-live=\"polite\"><\/div>\r\n<div id=\"loading\" class=\"loader\" style=\"display:none;\"><\/div>\r\n\r\n\r\n<!-- ======================== CSS ========================= -->\r\n<style>\r\n\/* =========================================================\r\n   Modern, responsive UI for the calculator interface\r\n   ========================================================= *\/\r\n\r\n\/* ---------- Design Tokens ---------- *\/\r\n:root{\r\n  --ui-bg:            #ffffff;\r\n  --ui-panel:         #f6f9fc;\r\n  --ui-border:        #e2e8f0;\r\n  --ui-text:          #0b2239;\r\n  --ui-text-muted:    #64748b;\r\n  --ui-accent:        #0b638b;\r\n  --ui-accent-weak:   rgba(11,99,139,.12);\r\n  --ui-danger:        #c0392b;\r\n  --ui-radius:        14px;\r\n  --ui-shadow:        0 8px 28px rgba(2, 8, 23, .06);\r\n  --ui-focus:         0 0 0 3px rgba(11, 99, 139, .22);\r\n  --ui-font:          system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n  --ui-cell-w:        110px;\r\n  --ui-input-h:       44px;\r\n  --ui-gap:           10px;\r\n}\r\n\r\n@media (prefers-color-scheme: dark){\r\n  :root{\r\n    --ui-bg:          #0f1a22;\r\n    --ui-panel:       #13202a;\r\n    --ui-border:      #223142;\r\n    --ui-text:        #e6f1f7;\r\n    --ui-text-muted:  #9fb4c6;\r\n    --ui-accent:      #5ac2f2;\r\n    --ui-accent-weak: rgba(90,194,242,.18);\r\n    --ui-danger:      #ff7f7f;\r\n    --ui-shadow:      0 12px 36px rgba(0,0,0,.45);\r\n  }\r\n}\r\n\r\n\/* ---------- Calculator container ---------- *\/\r\n.calculator-container{\r\n  width: 800px;\r\n  max-width: 800px;\r\n  margin: 18px auto;\r\n  padding: 20px 20px 22px;\r\n  background: var(--ui-bg);\r\n  color: var(--ui-text);\r\n  border: 1px solid var(--ui-border);\r\n  border-radius: var(--ui-radius);\r\n  box-shadow: var(--ui-shadow);\r\n  font-family: var(--ui-font);\r\n}\r\n\r\n\/* ---------- Controls: label + select ---------- *\/\r\n.calculator-container label{\r\n  display:block;\r\n  font-weight:700;\r\n  font-size:.98rem;\r\n  letter-spacing:.01em;\r\n  margin: 0 0 8px 2px;\r\n  color: var(--ui-text);\r\n}\r\n\r\n.calculator-container select{\r\n  width: 220px;\r\n  height: var(--ui-input-h);\r\n  padding: 0 12px;\r\n  border-radius: 12px;\r\n  border: 1px solid var(--ui-border);\r\n  background: var(--ui-panel);\r\n  color: var(--ui-text);\r\n  font-weight: 600;\r\n  outline: none;\r\n  transition: box-shadow .15s ease, border-color .15s ease, background-color .2s ease, transform .05s ease;\r\n}\r\n.calculator-container select:hover{\r\n  border-color: var(--ui-accent);\r\n  background: color-mix(in oklab, var(--ui-panel), var(--ui-accent) 6%);\r\n}\r\n.calculator-container select:focus-visible{\r\n  border-color: var(--ui-accent);\r\n  box-shadow: var(--ui-focus);\r\n  background: #fff;\r\n  transform: translateY(-1px);\r\n}\r\n\r\n\/* ---------- Matrix table ---------- *\/\r\n.calculator-container table#matrixTable{\r\n  margin: 16px 0 12px;\r\n  border-left: 1px solid #ddd; \r\n  border-right: 1px solid #ddd;\r\n  border-collapse: collapse;\r\n  width: 100%;\r\n}\r\n.calculator-container table#matrixTable td, \r\n.calculator-container table#matrixTable th,\r\n.calculator-container table#matrixTable tr{\r\n  padding: 3px 3px;\r\n  margin: 0;\r\n  border: 0;\r\n}\r\n\r\n\/* ---------- Matrix inputs ---------- *\/\r\n.calculator-container table#matrixTable input[type=\"text\"]{\r\n  width: 100%;\r\n  max-width: 100%;\r\n  height: var(--ui-input-h);\r\n  box-sizing: border-box;\r\n  padding: 0 10px;\r\n  border: 1px solid var(--ui-border);\r\n  border-radius: 10px;\r\n  background: var(--ui-panel);\r\n  color: var(--ui-text);\r\n  font-weight: 600;\r\n  text-align: center;\r\n  transition: box-shadow .15s ease, border-color .15s ease, background-color .2s ease, transform .05s ease;\r\n  outline: none;\r\n}\r\n.calculator-container table#matrixTable input[type=\"text\"]::placeholder{\r\n  color: var(--ui-text-muted);\r\n  opacity: .75;\r\n}\r\n.calculator-container table#matrixTable input[type=\"text\"]:hover{\r\n  border-color: var(--ui-accent);\r\n  background: color-mix(in oklab, var(--ui-panel), var(--ui-accent) 6%);\r\n}\r\n.calculator-container table#matrixTable input[type=\"text\"]:focus-visible{\r\n  border-color: var(--ui-accent);\r\n  box-shadow: var(--ui-focus);\r\n  background: #fff;\r\n  transform: translateY(-1px);\r\n}\r\n.calculator-container table#matrixTable input[type=\"text\"].is-error{\r\n  border-color: var(--ui-danger);\r\n  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ui-danger), white 76%);\r\n}\r\n.calculator-container table#matrixTable input.input-error{\r\n  outline: 2px solid #d93025;\r\n  border-color: #d93025;\r\n}\r\n\r\n\/* ---------- Solve button ---------- *\/\r\n#generate-button,\r\n.calculator-container input[type=\"button\"]#generate-button{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:8px;\r\n\r\n  width:100%;\r\n  height:48px;\r\n  margin-top:10px;\r\n\r\n  background: var(--ui-accent);\r\n  color:#fff;\r\n  border:1px solid transparent;\r\n  border-radius: 12px;\r\n  font-weight: 800;\r\n  letter-spacing:.02em;\r\n  cursor:pointer;\r\n  transition: transform .05s ease, filter .15s ease, box-shadow .15s ease, background-color .2s ease;\r\n}\r\n#generate-button:hover{\r\n  filter: brightness(1.05);\r\n  box-shadow: 0 10px 30px rgba(11,99,139,.18);\r\n}\r\n#generate-button:active{\r\n  transform: translateY(1px);\r\n}\r\n#generate-button:disabled{\r\n  opacity:.55;\r\n  cursor:not-allowed;\r\n  box-shadow:none;\r\n}\r\n\r\n\/* ---------- Loader ---------- *\/\r\n.loader{\r\n  margin: 20px auto;\r\n  border: 6px solid #e9eef5;\r\n  border-top: 6px solid var(--ui-accent);\r\n  border-radius: 50%;\r\n  width: 75px; height: 75px;\r\n  animation: spin .9s linear infinite;\r\n}\r\n@keyframes spin{ to{ transform: rotate(360deg); } }\r\n\r\n\/* ---------- Error message ---------- *\/\r\n.error-message{\r\n  display:none;\r\n  width: 800px;\r\n  max-width: 800px;\r\n  margin: 14px auto 0;\r\n  background: color-mix(in oklab, var(--ui-danger), white 90%);\r\n  color: var(--ui-danger);\r\n  border: 1px solid color-mix(in oklab, var(--ui-danger), white 68%);\r\n  border-left: 4px solid var(--ui-danger);\r\n  border-radius: 12px;\r\n  padding: 12px 14px;\r\n  box-shadow: var(--ui-shadow);\r\n  font-weight: 600;\r\n  font-family: var(--ui-font);\r\n}\r\n.error-message.show{ display:block; animation: fadeIn .4s ease-in-out; }\r\n@keyframes fadeIn{ from{opacity:0} to{opacity:1} }\r\n\r\n\/* ---------- Global focus-visible helper ---------- *\/\r\n:focus-visible{\r\n  outline: none;\r\n  box-shadow: var(--ui-focus);\r\n}\r\n\r\n\/* =========================================================\r\n   Responsive adaptations\r\n   ========================================================= *\/\r\n@media (max-width:1024px){\r\n  .calculator-container,\r\n  .error-message{\r\n    width: min(800px, calc(100% - 48px));\r\n    max-width: 100%;\r\n    margin-left: auto;\r\n    margin-right: auto;\r\n  }\r\n\r\n  .calculator-container select{\r\n    width: 260px;\r\n  }\r\n\r\n  .calculator-container table#matrixTable{\r\n    border-spacing: 8px;\r\n  }\r\n  .calculator-container table#matrixTable input[type=\"text\"]{\r\n    width: 100px;\r\n  }\r\n}\r\n\r\n@media (max-width:860px){\r\n  .calculator-container,\r\n  .error-message{\r\n    width: calc(100% - 32px);\r\n    margin-left:16px; margin-right:16px;\r\n    padding: 18px;\r\n  }\r\n  .calculator-container select{ width: 220px; }\r\n  .calculator-container table#matrixTable input[type=\"text\"]{\r\n    width: 90px; height: 42px; font-size: .98rem;\r\n  }\r\n  #generate-button{ height: 46px; }\r\n}\r\n\r\n@media (max-width:768px){\r\n  :root{ --ui-gap: 8px; --ui-cell-w: 84px; }\r\n\r\n  .calculator-container{ padding:16px; }\r\n  .calculator-container label{ font-size:.95rem; margin-bottom:6px; }\r\n\r\n  .calculator-container select{\r\n    width: 100%;\r\n    height: 44px;\r\n  }\r\n\r\n  .calculator-container table#matrixTable{\r\n    border-spacing: 6px;\r\n  }\r\n  .calculator-container table#matrixTable input[type=\"text\"]{\r\n    width: var(--ui-cell-w);\r\n    height: 42px;\r\n    font-size: .96rem;\r\n    padding: 0 8px;\r\n  }\r\n\r\n  #generate-button{ height: 46px; font-size: 1rem; }\r\n  .error-message{ width: calc(100% - 32px); max-width: none; }\r\n}\r\n\r\n@media (max-width:480px){\r\n  :root{ --ui-cell-w: 76px; }\r\n\r\n  .calculator-container{\r\n    padding: 14px;\r\n  }\r\n  .calculator-container table#matrixTable{\r\n    border-spacing: 6px;\r\n  }\r\n  .calculator-container table#matrixTable input[type=\"text\"]{\r\n    width: var(--ui-cell-w);\r\n    height: 40px;\r\n    font-size: .95rem;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }\r\n}\r\n\r\n\/* =========================================================\r\n   Solution styles (\u0432\u0430\u0448 \u0431\u043b\u043e\u043a)\r\n   ========================================================= *\/\r\n:root {\r\n  --cs-bg:            #f7fbff;\r\n  --cs-card:          #ffffff;\r\n  --cs-border:        #d6e7f8;\r\n  --cs-text:          #0b2239;\r\n  --cs-muted:         #5c7286;\r\n  --cs-accent:        #0b638b;\r\n  --cs-accent-weak:   rgba(11, 99, 139, 0.12);\r\n  --cs-success:       #107a3c;\r\n  --cs-warn:          #8a5b00;\r\n  --cs-error:         #9b2424;\r\n  --cs-shadow:        0 6px 24px rgba(11, 99, 139, 0.08);\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n  :root {\r\n    --cs-bg:          #0f1a22;\r\n    --cs-card:        #16232c;\r\n    --cs-border:      #203241;\r\n    --cs-text:        #e6f1f7;\r\n    --cs-muted:       #9eb6c7;\r\n    --cs-accent:      #5ac2f2;\r\n    --cs-accent-weak: rgba(90, 194, 242, 0.16);\r\n    --cs-success:     #4cd17d;\r\n    --cs-warn:        #ffc156;\r\n    --cs-error:       #ff7b7b;\r\n    --cs-shadow:      0 10px 36px rgba(0, 0, 0, 0.35);\r\n  }\r\n}\r\n\r\n.solution-container {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  min-width: 100%;\r\n  margin: 15px auto;\r\n  padding: 20px;\r\n  background: #fff;\r\n  color: #333;\r\n  font: 16px\/1.6 system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\r\n  overflow-x: hidden;\r\n  overflow-y: visible;\r\n}\r\n\r\n.solution-container .cramer-solution {\r\n  counter-reset: step;\r\n  display: grid;\r\n  gap: 14px;\r\n  margin-top: 8px;\r\n}\r\n\r\n.solution-container .cramer-heading{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:6px;\r\n  margin: 4px 0 12px;\r\n  padding: 14px 16px;\r\n}\r\n\r\n.solution-container .cramer-heading__title{\r\n  font-weight: 800;\r\n  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);\r\n  letter-spacing: .01em;\r\n  color: var(--cs-text, #0b2239);\r\n}\r\n\r\n.solution-container .cramer-heading__meta{\r\n  font-size: .88rem;\r\n  color: var(--cs-muted, #5c7286);\r\n}\r\n\r\n.solution-container .cramer-step {\r\n  position: relative;\r\n  min-width: 0;\r\n  padding: 16px 16px 16px 60px;\r\n  background: var(--cs-card);\r\n  border: 1px solid var(--cs-border);\r\n  border-radius: 14px;\r\n  box-shadow: var(--cs-shadow);\r\n  color: var(--cs-text);\r\n  line-height: 1.6;\r\n}\r\n\r\n.solution-container .cramer-step::before {\r\n  content: counter(step);\r\n  counter-increment: step;\r\n  position: absolute;\r\n  top: 16px;\r\n  left: 16px;\r\n  width: 28px;\r\n  height: 28px;\r\n  display: grid;\r\n  place-items: center;\r\n  border-radius: 999px;\r\n  background: var(--cs-accent-weak);\r\n  border: 1px solid var(--cs-border);\r\n  color: var(--cs-accent);\r\n  font: 700 0.95rem\/1 system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n}\r\n\r\n.solution-container .cramer-step::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 30px;\r\n  top: 48px;\r\n  bottom: -14px;\r\n  width: 2px;\r\n  background: linear-gradient(to bottom, var(--cs-accent-weak), transparent 70%);\r\n}\r\n.solution-container .cramer-step:last-child::after { display: none; }\r\n\r\n.solution-container .cramer-step__title,\r\n.solution-container .cramer-step > h3 {\r\n  margin: 0 0 8px 0;\r\n  font-weight: 700;\r\n  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);\r\n  letter-spacing: .01em;\r\n}\r\n\r\n.solution-container .cramer-step p {\r\n  margin: 0 0 8px 0;\r\n  color: var(--cs-text);\r\n}\r\n\r\n.solution-container .cramer-step .formula {\r\n  background: #fff;\r\n  border: 1px dashed var(--cs-border);\r\n  border-left: 3px solid var(--cs-accent);\r\n  border-radius: 10px;\r\n  padding: 10px 12px;\r\n  margin-top: 8px;\r\n  max-width: 100%;\r\n  min-width: 0;\r\n  overflow-x: auto;\r\n  overflow-y: hidden;\r\n  white-space: nowrap;\r\n  -webkit-overflow-scrolling: touch;\r\n  scrollbar-width: thin;\r\n  scrollbar-color: var(--cs-accent) transparent;\r\n}\r\n@media (prefers-color-scheme: dark) {\r\n  .solution-container .cramer-step .formula { background: #0f1a22; }\r\n}\r\n.solution-container .cramer-step .formula .mjx-container,\r\n.solution-container .cramer-step .formula .katex-display,\r\n.solution-container .cramer-step .formula .katex {\r\n  display: inline-block !important;\r\n  white-space: nowrap !important;\r\n  max-width: none !important;\r\n}\r\n\r\n.solution-container .cramer-step .formula::-webkit-scrollbar { height: 8px; }\r\n.solution-container .cramer-step .formula::-webkit-scrollbar-track { background: transparent; }\r\n.solution-container .cramer-step .formula::-webkit-scrollbar-thumb {\r\n  background-color: var(--cs-accent);\r\n  border-radius: 8px;\r\n  background-clip: padding-box;\r\n}\r\n.solution-container .cramer-step .formula::-webkit-scrollbar-thumb:hover { filter: brightness(0.9); }\r\n\r\n.solution-container .cramer-badges {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 8px;\r\n  margin: 6px 0 4px 0;\r\n}\r\n.solution-container .cramer-badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  border-radius: 999px;\r\n  padding: 4px 10px;\r\n  font-weight: 700;\r\n  font-size: .78rem;\r\n  letter-spacing: .02em;\r\n  border: 1px solid var(--cs-border);\r\n  background: var(--cs-accent-weak);\r\n  color: var(--cs-accent);\r\n}\r\n.solution-container .cramer-badge--ok {\r\n  background: rgba(16, 122, 60, 0.12);\r\n  color: var(--cs-success);\r\n  border-color: rgba(16, 122, 60, 0.22);\r\n}\r\n\r\n.solution-container .cramer-details { margin-top: 8px; }\r\n.solution-container .cramer-details > summary {\r\n  cursor: pointer;\r\n  list-style: none;\r\n  padding: 8px 12px;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cs-border);\r\n  background: var(--cs-bg);\r\n  color: var(--cs-text);\r\n  font-weight: 600;\r\n  transition: background-color .2s ease, border-color .2s ease;\r\n}\r\n.solution-container .cramer-details > summary::marker { content: \"\"; }\r\n.solution-container .cramer-details > summary::before {\r\n  content: \"\u25b8\";\r\n  display: inline-block;\r\n  margin-right: 8px;\r\n  transition: transform .2s ease;\r\n}\r\n.solution-container .cramer-details[open] > summary::before { transform: rotate(90deg); }\r\n\r\n.solution-container .cramer-step--result { border-left: 4px solid var(--cs-success); }\r\n.solution-container .cramer-step--result::before {\r\n  color: var(--cs-success);\r\n  background: rgba(16, 122, 60, 0.12);\r\n}\r\n\r\n.solution-container .cramer-step em,\r\n.solution-container .cramer-step .highlight {\r\n  padding: 0.05rem 0.25rem;\r\n  border-radius: 6px;\r\n  background: var(--cs-accent-weak);\r\n  font-weight: 700;\r\n}\r\n\r\n@media (max-width: 1024px) {\r\n  .solution-container {\r\n    width: min(800px, calc(100% - 40px));\r\n    max-width: 100%;\r\n    min-width: 0;\r\n    margin: 16px auto;\r\n    padding: 18px;\r\n    font-size: 15px;\r\n  }\r\n  .solution-container .cramer-step {\r\n    padding: 14px 14px 14px 56px;\r\n    border-radius: 12px;\r\n  }\r\n  .solution-container .cramer-step::before {\r\n    width: 26px; height: 26px;\r\n    font-size: 0.9rem;\r\n    top: 14px; left: 14px;\r\n  }\r\n  .solution-container .cramer-step::after { left: 28px; top: 44px; }\r\n  .solution-container .cramer-step .formula {\r\n    padding: 9px 10px;\r\n    font-size: 0.98em;\r\n  }\r\n  .solution-container .cramer-badge { font-size: .76rem; }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .solution-container {\r\n    width: calc(100% - 24px);\r\n    max-width: 100%;\r\n    min-width: 0;\r\n    margin: 12px auto;\r\n    padding: 14px;\r\n    font-size: 14px;\r\n  }\r\n  .solution-container .cramer-solution { gap: 12px; }\r\n  .solution-container .cramer-step {\r\n    padding: 12px 12px 12px 52px;\r\n    border-radius: 12px;\r\n  }\r\n  .solution-container .cramer-step::before {\r\n    width: 24px; height: 24px;\r\n    font-size: 0.85rem;\r\n    top: 12px; left: 12px;\r\n  }\r\n  .solution-container .cramer-step::after {\r\n    left: 26px;\r\n    top: 40px;\r\n    bottom: -12px;\r\n  }\r\n  .solution-container .cramer-step__title,\r\n  .solution-container .cramer-step > h3 {\r\n    font-size: 1rem;\r\n    margin-bottom: 6px;\r\n  }\r\n  .solution-container .cramer-step p { margin-bottom: 6px; }\r\n  .solution-container .cramer-step .formula {\r\n    padding: 8px 10px;\r\n    font-size: 0.96em;\r\n  }\r\n  .solution-container .cramer-badge {\r\n    padding: 3px 8px;\r\n    font-size: .74rem;\r\n    border-radius: 999px;\r\n  }\r\n  .solution-container .cramer-step:last-child::after { display: none; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .solution-container {\r\n    width: calc(100% - 16px);\r\n    margin: 10px auto;\r\n    padding: 12px;\r\n    font-size: 13.5px;\r\n  }\r\n  .solution-container .cramer-step {\r\n    padding: 10px 10px 10px 46px;\r\n    border-radius: 10px;\r\n  }\r\n  .solution-container .cramer-step::before {\r\n    width: 22px; height: 22px;\r\n    font-size: 0.8rem;\r\n    top: 10px; left: 10px;\r\n  }\r\n  .solution-container .cramer-step::after { display: none; }\r\n  .solution-container .cramer-step__title,\r\n  .solution-container .cramer-step > h3 {\r\n    font-size: .98rem;\r\n    margin-bottom: 4px;\r\n  }\r\n  .solution-container .cramer-step .formula {\r\n    padding: 6px 8px;\r\n    font-size: 0.94em;\r\n  }\r\n  .solution-container .cramer-badges { gap: 6px; }\r\n  .solution-container .cramer-badge { font-size: .72rem; padding: 3px 8px; }\r\n  .solution-container .cramer-details > summary {\r\n    padding: 7px 10px;\r\n    border-radius: 8px;\r\n  }\r\n}\r\n\r\n@media print {\r\n  .solution-container,\r\n  .solution-container .cramer-step {\r\n    box-shadow: none;\r\n    background: #fff;\r\n  }\r\n  .solution-container .cramer-step::before,\r\n  .solution-container .cramer-step::after { display: none; }\r\n}\r\n\r\n\/* ===== \u0414\u0415\u041b\u042c\u0422\u0410-\u0421\u0422\u0418\u041b\u0406 (\u0432\u0430\u0448 \u0431\u043b\u043e\u043a) ===== *\/\r\n.matrix-controls{\r\n  display:flex;\r\n  gap:12px;\r\n  flex-wrap:wrap;\r\n  \/* \ud83d\udd25 \u0417\u041c\u0406\u041d\u0410: \u0431\u0443\u043b\u043e flex-end, \u0442\u0435\u043f\u0435\u0440 \u0432\u0456\u0434 \u0432\u0435\u0440\u0445\u043d\u044c\u043e\u0433\u043e \u043a\u0440\u0430\u044e *\/\r\n  align-items:flex-start;\r\n}\r\n\r\n.matrix-controls__item{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:8px;\r\n}\r\n\r\n.matrix-controls__item--actions{ margin-left:auto; }\r\n.matrix-actions{ display:flex; gap:10px; flex-wrap:wrap; }\r\n\r\n\/* \u041a\u043d\u043e\u043f\u043a\u0438 *\/\r\n.calculator-container .btn-secondary{\r\n  height:44px;\r\n  padding:0 14px;\r\n  border-radius:12px;\r\n  border:1px solid var(--ui-border);\r\n  background: var(--ui-panel);\r\n  color: var(--ui-text);\r\n  font-weight:800;\r\n  cursor:pointer;\r\n\r\n  appearance:none;\r\n  -webkit-appearance:none;\r\n  -webkit-tap-highlight-color: transparent;\r\n\r\n  outline: none;\r\n  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease, filter .15s ease, background-color .2s ease, color .2s ease;\r\n}\r\n\r\n\/* \ud83d\udd25 \u0417\u041c\u0406\u041d\u0410: \u0443\u043d\u0456\u0444\u0456\u043a\u0443\u0454\u043c\u043e \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0456\u044e \u043a\u043d\u043e\u043f\u043e\u043a \u0437 select *\/\r\n.calculator-container .btn-secondary{\r\n  height: var(--ui-input-h);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.calculator-container .btn-secondary:hover,\r\n.calculator-container .btn-secondary:focus-visible{\r\n  border-color: var(--ui-accent);\r\n  background: var(--ui-accent);\r\n  color:#fff;\r\n  filter: brightness(1.02);\r\n  box-shadow: 0 10px 24px rgba(11,99,139,.12);\r\n}\r\n.calculator-container .btn-secondary:focus{\r\n  background: var(--ui-panel) !important;\r\n  color: var(--ui-text) !important;\r\n  border-color: var(--ui-border) !important;\r\n  box-shadow: none !important;\r\n}\r\n.calculator-container .btn-secondary:active{\r\n  background: var(--ui-accent) !important;\r\n  color:#fff !important;\r\n  filter: brightness(0.95); \r\n  transform: translateY(1px);\r\n}\r\n.calculator-container .btn-secondary:disabled{\r\n  opacity:.55;\r\n  cursor:not-allowed;\r\n  box-shadow:none !important;\r\n  filter:none;\r\n  transform:none;\r\n}\r\n\r\n\/* \u041d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u0440\u0430\u043d\u0434\u043e\u043c\u0443 *\/\r\n.random-settings{\r\n  margin-top: 12px;\r\n  border: 1px solid var(--ui-border);\r\n  border-radius: 12px;\r\n  background: var(--ui-panel);\r\n  padding: 10px 12px;\r\n}\r\n.random-settings > summary{\r\n  cursor:pointer;\r\n  font-weight:800;\r\n  color: var(--ui-text);\r\n  list-style:none;\r\n}\r\n.random-settings > summary::-webkit-details-marker{ display:none; }\r\n.random-settings > summary::before{\r\n  content:\"\u25b8\";\r\n  display:inline-block;\r\n  margin-right:8px;\r\n  transition: transform .2s ease;\r\n}\r\n.random-settings[open] > summary::before{ transform: rotate(90deg); }\r\n\r\n.random-settings__grid{\r\n  margin-top: 12px;\r\n  display:grid;\r\n  grid-template-columns: repeat(3, minmax(160px, 1fr));\r\n  gap: 12px;\r\n}\r\n.random-settings__item{ display:flex; flex-direction:column; gap:6px; }\r\n\r\n.random-settings__item input[type=\"text\"],\r\n.random-settings__item select{\r\n  height:44px;\r\n  border-radius:12px;\r\n  border:1px solid var(--ui-border);\r\n  background: #fff;\r\n  color: var(--ui-text);\r\n  padding: 0 12px;\r\n  font-weight:700;\r\n  outline:none;\r\n}\r\n@media (prefers-color-scheme: dark){\r\n  .random-settings__item input[type=\"text\"],\r\n  .random-settings__item select{ background: #0f1a22; }\r\n}\r\n@media (max-width:768px){\r\n  .matrix-controls__item--actions{ margin-left:0; width:100%; }\r\n  .matrix-actions{ width:100%; }\r\n  .btn-secondary{ width:100%; }\r\n  .random-settings__grid{ grid-template-columns: 1fr; }\r\n}\r\n\r\n\/* sr-only *\/\r\n.sr-only{\r\n  position:absolute !important;\r\n  width:1px; height:1px;\r\n  padding:0; margin:-1px;\r\n  overflow:hidden; clip:rect(0,0,0,0);\r\n  border:0;\r\n}\r\n\r\n\/* ===== Toggle \u044f\u043a select#matrixSize ===== *\/\r\n.matrix-controls__item .toggle{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 10px;\r\n\r\n  width: 220px;\r\n  height: var(--ui-input-h);\r\n  padding: 0 12px;\r\n\r\n  border-radius: 12px;\r\n  border: 1px solid var(--ui-border);\r\n  background: var(--ui-panel);\r\n  color: var(--ui-text);\r\n  font-weight: 600;\r\n\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n\r\n  transition: box-shadow .15s ease, border-color .15s ease, background-color .2s ease, transform .05s ease;\r\n}\r\n\r\n.matrix-controls__item .toggle input{\r\n  position: absolute;\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n.matrix-controls__item .toggle__track{\r\n  flex: 0 0 auto;\r\n  width: 44px;\r\n  height: 24px;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--ui-border);\r\n  background: color-mix(in oklab, var(--ui-panel), var(--ui-text) 6%);\r\n  position: relative;\r\n  transition: background-color .2s ease, border-color .2s ease;\r\n}\r\n.matrix-controls__item .toggle__track::after{\r\n  content:\"\";\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 3px;\r\n  width: 18px;\r\n  height: 18px;\r\n  border-radius: 999px;\r\n  transform: translateY(-50%);\r\n  background: #fff;\r\n  border: 1px solid var(--ui-border);\r\n  box-shadow: 0 3px 10px rgba(2,8,23,.12);\r\n  transition: left .2s ease;\r\n}\r\n\r\n.matrix-controls__item .toggle__label{\r\n  flex: 1 1 auto;\r\n  min-width: 0;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.matrix-controls__item .toggle:hover{\r\n  border-color: var(--ui-accent);\r\n  background: color-mix(in oklab, var(--ui-panel), var(--ui-accent) 6%);\r\n}\r\n.matrix-controls__item .toggle:has(input:focus-visible){\r\n  border-color: var(--ui-accent);\r\n  box-shadow: var(--ui-focus);\r\n  background: #fff;\r\n  transform: translateY(-1px);\r\n}\r\n\r\n.matrix-controls__item .toggle input:checked + .toggle__track{\r\n  background: color-mix(in oklab, var(--ui-accent), white 70%);\r\n  border-color: var(--ui-accent);\r\n}\r\n.matrix-controls__item .toggle input:checked + .toggle__track::after{\r\n  left: calc(100% - 21px);\r\n}\r\n\r\n@media (prefers-color-scheme: dark){\r\n  .matrix-controls__item .toggle:has(input:focus-visible){\r\n    background: var(--ui-panel);\r\n  }\r\n  .matrix-controls__item .toggle__track::after{\r\n    background: #0f1a22;\r\n  }\r\n}\r\n\r\n@media (max-width:768px){\r\n  .matrix-controls__item .toggle{\r\n    width: 100%;\r\n  }\r\n}\r\n\r\n\/* =========================================================\r\n   \ud83d\udd25 \u0417\u041c\u0406\u041d\u0410: \u0413\u041e\u041b\u041e\u0412\u041d\u0418\u0419 FIX \u0432\u0438\u0440\u0456\u0432\u043d\u044e\u0432\u0430\u043d\u043d\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0437 select \u0456 toggle\r\n   \u041f\u0440\u0438\u0447\u0438\u043d\u0430: label \u0443 actions \u043c\u0430\u0454 sr-only \u0456 \u041d\u0415 \u0437\u0430\u0439\u043c\u0430\u0454 \u043c\u0456\u0441\u0446\u0435 => \u0431\u043b\u043e\u043a \"\u043f\u0456\u0434\u0441\u0442\u0440\u0438\u0431\u0443\u0454\" \u0432\u0433\u043e\u0440\u0443.\r\n   \u0420\u0456\u0448\u0435\u043d\u043d\u044f: \u0440\u0435\u0437\u0435\u0440\u0432\u0443\u0454\u043c\u043e \u0432\u0438\u0441\u043e\u0442\u0443 label \u0447\u0435\u0440\u0435\u0437 ::before (\u043d\u0435\u0432\u0438\u0434\u0438\u043c\u043e).\r\n   ========================================================= *\/\r\n.matrix-controls__item--actions::before{\r\n  content: \"\u0414\u0456\u0457\";\r\n  display: block;\r\n  font-weight:700;\r\n  font-size:.98rem;\r\n  letter-spacing:.01em;\r\n  margin: 0 0 8px 2px;\r\n  visibility: hidden; \/* \u043c\u0456\u0441\u0446\u0435 \u0454, \u0442\u0435\u043a\u0441\u0442\u0443 \u043d\u0435 \u0432\u0438\u0434\u043d\u043e *\/\r\n}\r\n\r\n\/* FIX: error badge \u044f\u043a \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u0438\u0439 \u0431\u043b\u043e\u043a + \u043a\u043e\u0440\u0435\u043a\u0442\u043d\u0456 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438 *\/\r\n.solution-container p.cramer-badge.cramer-badge--error{\r\n  display: block !important;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  box-sizing: border-box;\r\n\r\n  padding: 12px 14px;\r\n  margin: 10px 0;\r\n\r\n  border-radius: 12px;\r\n  border: 1px solid color-mix(in oklab, var(--cs-error), white 70%);\r\n  border-left: 4px solid var(--cs-error);\r\n\r\n  background: color-mix(in oklab, var(--cs-error), white 90%);\r\n  color: var(--cs-error);\r\n\r\n  font-weight: 700;\r\n  line-height: 1.55;\r\n\r\n  white-space: normal !important;\r\n  overflow-wrap: anywhere;\r\n  word-break: break-word;\r\n}\r\n.solution-container p.cramer-badge.cramer-badge--error .MathJax,\r\n.solution-container p.cramer-badge.cramer-badge--error .mjx-container{\r\n  display: inline !important;\r\n  max-width: 100% !important;\r\n  white-space: normal !important;\r\n}\r\n@media (prefers-color-scheme: dark){\r\n  .solution-container p.cramer-badge.cramer-badge--error{\r\n    background: rgba(155, 36, 36, 0.18);\r\n    border-color: rgba(255, 123, 123, 0.28);\r\n    color: var(--cs-error);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/* =========================\r\n   Utilities and state\r\n========================= *\/\r\n\r\nlet activeController = null;\r\n\r\nconst AJAX_URL = (typeof window !== 'undefined' && window.ajaxurl)\r\n  ? window.ajaxurl\r\n  : '\/en\/wp-admin\/admin-ajax.php';\r\n\r\n\/** Show\/hide loader *\/\r\nfunction setLoading(isLoading){\r\n  const loading = document.getElementById('loading');\r\n  if (loading) loading.style.display = isLoading ? 'block' : 'none';\r\n}\r\n\r\n\/** Enable\/disable the Generate button *\/\r\nfunction setGenerateDisabled(disabled){\r\n  const btn = document.getElementById('generate-button');\r\n  if (btn) btn.disabled = !!disabled;\r\n}\r\n\r\n\/** Show an error *\/\r\nfunction showError(message){\r\n  const el = document.getElementById('error-block');\r\n  if (!el) return;\r\n  el.textContent = message || 'Something went wrong.';\r\n  el.classList.add('show');\r\n}\r\n\r\n\/** Hide error *\/\r\nfunction clearError(){\r\n  const el = document.getElementById('error-block');\r\n  if (!el) return;\r\n  el.textContent = '';\r\n  el.classList.remove('show');\r\n}\r\n\r\n\/* =========================\r\n   Heading before the steps (\u2705 bordering method)\r\n========================= *\/\r\nfunction buildHeadingHTML(){\r\n  const size = Number(document.getElementById('matrixSize')?.value || 3);\r\n  const auto = !!document.getElementById('autoPermuteToggle')?.checked;\r\n\r\n  return `\r\n    <h2 class=\"cramer-heading\" role=\"heading\" aria-level=\"2\">\r\n      <span class=\"cramer-heading__title\">Inverse of a Matrix \u2014 Sequential Bordering Method<\/span>\r\n      <span class=\"cramer-heading__meta\">\r\n        A\u207b\u00b9 for A \u2208 \u211d\u207f\u02e3\u207f \u2022 the idea: we add one row and one column, then update A\u2096\u207b\u00b9\r\n        \u2022 n=${size} \u2022 auto row\/column swap: ${auto ? 'On' : 'Off'}\r\n      <\/span>\r\n    <\/h2>\r\n  `;\r\n}\r\n\r\n\/* =========================\r\n   Number normalization\/parsing\r\n========================= *\/\r\n\r\nfunction normalizeNumberInput(value){\r\n  let s = String(value ?? '').trim();\r\n  if (!s) return '';\r\n\r\n  s = s.replace(\/\\s+\/g, '').replace(',', '.');\r\n  s = s.replace(\/[^0-9\\-.]\/g, '');\r\n  s = s.replace(\/(?!^)-\/g, '');\r\n\r\n  const parts = s.split('.');\r\n  if (parts.length > 2){\r\n    s = parts[0] + '.' + parts.slice(1).join('');\r\n  }\r\n\r\n  return s;\r\n}\r\n\r\nfunction parseNumberSafe(val){\r\n  const v = normalizeNumberInput(val);\r\n  if (v === '') return 0;\r\n  if (v === '-' || v === '.' || v === '-.') return null;\r\n\r\n  const n = Number(v);\r\n  return Number.isFinite(n) ? n : null;\r\n}\r\n\r\n\/* =========================\r\n   MathJax v2 (targeted typeset)\r\n========================= *\/\r\n\r\nfunction renderMathJax(container, tries = 12){\r\n  const el = container || document.getElementById('fcontainer');\r\n  if (!el) return;\r\n\r\n  if (window.MathJax && window.MathJax.Hub && MathJax.Hub.Queue){\r\n    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub, el]);\r\n    return;\r\n  }\r\n  if (tries > 0){\r\n    setTimeout(() => renderMathJax(el, tries - 1), 120);\r\n  }\r\n}\r\n\r\n\/* =========================\r\n   Build\/change the input grid\r\n========================= *\/\r\n\r\nfunction clearResult(){\r\n  const resultC = document.getElementById('fcontainer');\r\n  if (resultC){\r\n    resultC.innerHTML = '';\r\n    resultC.style.display = 'none';\r\n  }\r\n}\r\n\r\nfunction removeInputErrorStyles(){\r\n  const table = document.getElementById('matrixTable');\r\n  if (!table) return;\r\n  table.querySelectorAll('input.input-error').forEach(inp => inp.classList.remove('input-error'));\r\n}\r\n\r\nfunction changeMatrixSize(){\r\n  const sizeSel = document.getElementById('matrixSize');\r\n  const size = Number(sizeSel ? sizeSel.value : 3) || 3;\r\n\r\n  clearResult();\r\n  clearError();\r\n  removeInputErrorStyles();\r\n\r\n  const table = document.getElementById('matrixTable');\r\n  if (!table) return;\r\n\r\n  while (table.rows.length > 0) table.deleteRow(0);\r\n\r\n  for (let i = 0; i < size; i++){\r\n    const row = table.insertRow(-1);\r\n\r\n    for (let j = 0; j < size; j++){\r\n      const cell = row.insertCell(-1);\r\n      const input = document.createElement('input');\r\n\r\n      input.type = 'text';\r\n      input.name = `A[${i}][${j}]`;\r\n      input.placeholder = '0';\r\n      input.inputMode = 'decimal';\r\n      input.autocomplete = 'off';\r\n      input.spellcheck = false;\r\n\r\n      input.addEventListener('input', () => {\r\n        const fixed = normalizeNumberInput(input.value);\r\n        if (input.value !== fixed) input.value = fixed;\r\n        if (input.classList.contains('input-error')){\r\n          input.classList.remove('input-error');\r\n        }\r\n      });\r\n\r\n      input.addEventListener('keydown', (e) => {\r\n        const allowed = [\r\n          'Backspace','Delete','Tab','Enter','Escape',\r\n          'ArrowLeft','ArrowRight','Home','End',\r\n          '-', '.', ',',\r\n        ];\r\n\r\n        if (\r\n          allowed.includes(e.key) ||\r\n          (e.key.length === 1 && \/[0-9]\/.test(e.key)) ||\r\n          e.ctrlKey || e.metaKey\r\n        ) return;\r\n\r\n        e.preventDefault();\r\n      });\r\n\r\n      cell.appendChild(input);\r\n    }\r\n  }\r\n}\r\n\r\n\/* =========================\r\n   Collect matrix from DOM + validation\r\n========================= *\/\r\n\r\nfunction collectMatrix(){\r\n  const table = document.getElementById('matrixTable');\r\n  if (!table) return { matrix: [], invalidCount: 0 };\r\n\r\n  let invalidCount = 0;\r\n  const matrix = [];\r\n\r\n  for (let i = 0; i < table.rows.length; i++){\r\n    const row = table.rows[i];\r\n    const rowVals = [];\r\n\r\n    for (let j = 0; j < row.cells.length; j++){\r\n      const input = row.cells[j].querySelector('input');\r\n      const raw = input ? input.value : '';\r\n      const parsed = parseNumberSafe(raw);\r\n\r\n      if (parsed === null){\r\n        invalidCount++;\r\n        if (input) input.classList.add('input-error');\r\n        rowVals.push(0);\r\n      } else {\r\n        rowVals.push(parsed);\r\n      }\r\n    }\r\n\r\n    matrix.push(rowVals);\r\n  }\r\n\r\n  return { matrix, invalidCount };\r\n}\r\n\r\n\/* =========================\r\n   Render the solution\r\n========================= *\/\r\n\r\nfunction renderSolutionIntoContainer(resultC, payload){\r\n  const heading = buildHeadingHTML();\r\n  let html = heading + '<div class=\"cramer-solution\">';\r\n\r\n  if (Array.isArray(payload)){\r\n    const texts = payload[2] || [];\r\n    const forms = payload[1] || [];\r\n    const n = Math.max(texts.length, forms.length);\r\n\r\n    for (let i = 0; i < n; i++){\r\n      html += '<section class=\"cramer-step\">';\r\n      if (texts[i]) html += texts[i];\r\n      if (forms[i]) html += '<div class=\"formula\">' + forms[i] + '<\/div>';\r\n      html += '<\/section>';\r\n    }\r\n  } else {\r\n    html += '<section class=\"cramer-step\"><div class=\"formula\">\\\\[' + payload + '\\\\]<\/div><\/section>';\r\n  }\r\n\r\n  html += '<\/div>';\r\n  resultC.innerHTML = html;\r\n}\r\n\r\n\/* =========================\r\n   Send to backend and show result\r\n========================= *\/\r\n\r\nfunction sendMatrixToServer(matrix){\r\n  const resultC = document.getElementById('fcontainer');\r\n\r\n  clearResult();\r\n  clearError();\r\n\r\n  if (activeController){\r\n    try { activeController.abort(); } catch(_) {}\r\n  }\r\n  activeController = new AbortController();\r\n\r\n  setLoading(true);\r\n  setGenerateDisabled(true);\r\n\r\n  const fd = new FormData();\r\n  fd.append('action', 'calculate_inverse_matrix_bordering_method'); \/\/ \u2705 your action\r\n  fd.append('matrix', JSON.stringify(matrix));\r\n\r\n  \/\/ \u2705 auto swap\r\n  const auto = !!document.getElementById('autoPermuteToggle')?.checked;\r\n  fd.append('auto_permute', auto ? '1' : '0');\r\n\r\n  fetch(AJAX_URL, {\r\n    method: 'POST',\r\n    body: fd,\r\n    signal: activeController.signal\r\n  })\r\n    .then(res => {\r\n      if (!res.ok) throw new Error('Network error. Please try again.');\r\n      return res.json();\r\n    })\r\n    .then(data => {\r\n      setLoading(false);\r\n      setGenerateDisabled(false);\r\n\r\n      if (!resultC) return;\r\n\r\n      if (!data || data.success !== true){\r\n        showError((data && data.error) ? data.error : 'The server couldn\u2019t process the request.');\r\n        return;\r\n      }\r\n\r\n      const payload = data.solution;\r\n      if (!payload){\r\n        showError('The server returned an empty response (solution).');\r\n        return;\r\n      }\r\n\r\n      renderSolutionIntoContainer(resultC, payload);\r\n      renderMathJax(resultC);\r\n\r\n      resultC.style.display = 'block';\r\n      resultC.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n    })\r\n    .catch(err => {\r\n      if (err && err.name === 'AbortError') return;\r\n\r\n      setLoading(false);\r\n      setGenerateDisabled(false);\r\n      showError(err?.message || 'Network error. Please try again.');\r\n    });\r\n}\r\n\r\n\/* =========================\r\n   Public handler\r\n========================= *\/\r\n\r\nfunction calculateInverseMatrix(){\r\n  clearError();\r\n  removeInputErrorStyles();\r\n\r\n  const { matrix, invalidCount } = collectMatrix();\r\n\r\n  if (!matrix.length){\r\n    showError('Please enter the matrix values.');\r\n    return;\r\n  }\r\n\r\n  if (invalidCount > 0){\r\n    showError('Some matrix values are not valid. Please fix the highlighted fields.');\r\n    return;\r\n  }\r\n\r\n  sendMatrixToServer(matrix);\r\n}\r\n\r\n\/* =========================\r\n   Clear \/ Fill randomly\r\n========================= *\/\r\n\r\nfunction clearMatrix(){\r\n  const table = document.getElementById('matrixTable');\r\n  if (!table) return;\r\n\r\n  table.querySelectorAll('input[type=\"text\"]').forEach(inp => {\r\n    inp.value = '';\r\n    inp.classList.remove('input-error');\r\n  });\r\n\r\n  clearError();\r\n  clearResult();\r\n}\r\n\r\nfunction getRandomSettings(){\r\n  const minEl = document.getElementById('randMin');\r\n  const maxEl = document.getElementById('randMax');\r\n  const decEl = document.getElementById('randDecimals');\r\n\r\n  const minV = parseNumberSafe(minEl ? minEl.value : '-5');\r\n  const maxV = parseNumberSafe(maxEl ? maxEl.value : '5');\r\n  const decimals = Number(decEl ? decEl.value : 0) || 0;\r\n\r\n  if (minV === null || maxV === null){\r\n    return { ok:false, error:'Invalid random fill settings (min\/max).' };\r\n  }\r\n  if (maxV < minV){\r\n    return { ok:false, error:'Maximum must be greater than or equal to minimum.' };\r\n  }\r\n  if (decimals < 0 || decimals > 6){\r\n    return { ok:false, error:'The number of decimal places must be between 0 and 6.' };\r\n  }\r\n\r\n  return { ok:true, min:minV, max:maxV, decimals };\r\n}\r\n\r\nfunction randFloat(min, max){\r\n  return Math.random() * (max - min) + min;\r\n}\r\n\r\nfunction fillRandom(){\r\n  const settings = getRandomSettings();\r\n  if (!settings.ok){\r\n    showError(settings.error);\r\n    return;\r\n  }\r\n\r\n  const table = document.getElementById('matrixTable');\r\n  if (!table) return;\r\n\r\n  const { min, max, decimals } = settings;\r\n\r\n  table.querySelectorAll('input[type=\"text\"]').forEach(inp => {\r\n    const v = randFloat(min, max);\r\n    const out = (decimals === 0) ? String(Math.round(v)) : String(Number(v.toFixed(decimals)));\r\n    inp.value = normalizeNumberInput(out);\r\n    inp.classList.remove('input-error');\r\n  });\r\n\r\n  clearError();\r\n  clearResult();\r\n}\r\n\r\n\/* =========================\r\n   Initialization\r\n========================= *\/\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  changeMatrixSize();\r\n\r\n  const sel = document.getElementById('matrixSize');\r\n  if (sel) sel.addEventListener('change', changeMatrixSize);\r\n\r\n  const autoToggle = document.getElementById('autoPermuteToggle');\r\n  if (autoToggle){\r\n    autoToggle.addEventListener('change', () => {\r\n      const label = document.querySelector('.toggle__label');\r\n      if (label) label.textContent = autoToggle.checked ? 'On' : 'Off';\r\n      clearError();\r\n      clearResult();\r\n    });\r\n  }\r\n\r\n  const table = document.getElementById('matrixTable');\r\n  if (table){\r\n    table.addEventListener('keydown', (e) => {\r\n      if (e.key === 'Enter'){\r\n        e.preventDefault();\r\n        calculateInverseMatrix();\r\n      }\r\n    });\r\n  }\r\n\r\n  const btn = document.getElementById('generate-button');\r\n  if (btn) btn.addEventListener('click', calculateInverseMatrix);\r\n\r\n  const clearBtn = document.getElementById('clearMatrixBtn');\r\n  if (clearBtn) clearBtn.addEventListener('click', clearMatrix);\r\n\r\n  const randBtn = document.getElementById('fillRandomBtn');\r\n  if (randBtn) randBtn.addEventListener('click', fillRandom);\r\n\r\n  const minEl = document.getElementById('randMin');\r\n  const maxEl = document.getElementById('randMax');\r\n  [minEl, maxEl].forEach(el => {\r\n    if (!el) return;\r\n    el.addEventListener('input', () => {\r\n      const fixed = normalizeNumberInput(el.value);\r\n      if (el.value !== fixed) el.value = fixed;\r\n    });\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-030b1e1 elementor-widget elementor-widget-html\" data-id=\"030b1e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"h2-title2\">Inverse of a Matrix Calculator: How Does It Work?<\/h2>\n<img decoding=\"async\" class=\"aligncenter wp-image-10020256 size-full\" src=\"https:\/\/www.mathros.net.ua\/en\/wp-content\/uploads\/2026\/02\/inverse-of-a-matrix-calculator-using-the-bordering-method2.jpg\" alt=\"Inverse of a matrix calculator\" width=\"150\" height=\"150\" \/>\n<p class=\"calculator-p\">Inverse of a matrix calculator works like this: you choose the matrix size (2\u00d72, 3\u00d73, \u2026, up to 8\u00d78), type your numbers into the table, and click <em>\u201cFind the inverse of a matrix\u201d<\/em>. Need to quickly plug in your own data or double-check a solution from your notes? Then you can either fill the matrix manually, or press <em>\u201cFill randomly\u201d<\/em> and instantly see how the calculator behaves on a real example.<\/p>\n<p class=\"calculator-p\">Next, the <a title=\"Inverse of a matrix by the bordering method\" href=\"https:\/\/www.mathros.net.ua\/en\/inverse-of-a-matrix-by-bordering-method\n.html\">sequential bordering<\/a> logic starts. Instead of showing only the final answer, the calculator grows the matrix step by step. It starts with the smallest block, finds its inverse, and then adds a new row and a new column\u2014updating the inverse using formulas and intermediate values along the way. Isn\u2019t it much more helpful to see exactly how the result changes after each expansion, rather than getting only a single final number?<\/p>\n<p class=\"calculator-p\">And what if, at some step, the calculation can\u2019t continue in the current row\/column order? That\u2019s where the <em>\u201cAuto swap rows\/columns\u201d<\/em> toggle helps. When needed, the calculator rearranges rows and\/or columns so the process can keep going and still produce the correct inverse. In the end, you get the final <a title=\"Invertible matrix\" href=\"https:\/\/en.wikipedia.org\/wiki\/Invertible_matrix\" target=\"_blank\" rel=\"nofollow noopener\">inverse matrix<\/a> plus a clear step-by-step explanation in the solution panel\u2014so you can calmly check every step, which is exactly what you want from an online tool, right?<\/p>\n<style>\n    \/* ===== Intro block (title + image + paragraphs) ===== *\/\n\n\/* Title *\/\n.h2-title2 {\n  \/* typography *\/\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\n  font-weight: 800;\n  font-size: clamp(1.25rem, 1.05rem + 1.4vw, 1.9rem); \/* ~20\u201330px *\/\n  line-height: 1.25;\n  letter-spacing: .01em;\n\n  \/* layout *\/\n  text-align: center;\n  max-width: 800px;\n  margin: 18px auto 12px;\n  padding: 0;\n\n  \/* color (better than plain gray) *\/\n  color: #334155; \/* slate-700 *\/\n  text-wrap: balance;\n}\n\n\/* Paragraphs *\/\n.calculator-p {\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif;\n  font-weight: 500;\n  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1rem); \/* ~15\u201316px *\/\n  line-height: 1.65;\n  color: #475569;   \/* slate-600 *\/\n  max-width: 800px;\n  margin: 10px auto;\n  padding: 0 6px;   \/* tiny breathing room on small screens *\/\n  text-align: center;\n  text-wrap: pretty;\n}\n\n\/* Links inside paragraphs *\/\n.calculator-p a {\n  color: #0b638b;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  text-decoration-thickness: 1.5px;\n  transition: color .15s ease, text-decoration-color .15s ease;\n}\n.calculator-p a:hover {\n  color: #084e6c;\n  text-decoration-color: currentColor;\n}\n.calculator-p a:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(11, 99, 139, .25);\n  border-radius: 6px;\n}\n\n\/* Centered image *\/\n.aligncenter {\n  display: block;\n  margin: 16px auto;\n  max-width: min(100%, 220px); \/* cap the size to keep the layout tidy *\/\n  height: auto;\n}\n\n\/* Dark mode *\/\n@media (prefers-color-scheme: dark) {\n  .h2-title2 { color: #e2e8f0; }      \/* slate-200 *\/\n  .calculator-p { color: #b6c3cf; }   \/* soft slate for paragraphs *\/\n  .calculator-p a { color: #5ac2f2; }\n  .calculator-p a:hover { color: #82d6fa; }\n}\n\n\/* Tablet tweaks *\/\n@media (max-width: 768px) {\n  .h2-title2 { margin: 16px auto 10px; }\n  .calculator-p { margin: 8px auto; }\n}\n\n\/* Small phones *\/\n@media (max-width: 480px) {\n  .aligncenter { max-width: min(100%, 180px); }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Need the Inverse of a Matrix via Sequential Bordering? This Online Calculator Shows How You Add One Row and One<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-centered.php","meta":{"footnotes":""},"class_list":["post-2704","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/2704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/comments?post=2704"}],"version-history":[{"count":59,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/2704\/revisions"}],"predecessor-version":[{"id":2871,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/2704\/revisions\/2871"}],"wp:attachment":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/media?parent=2704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}