{"id":3489,"date":"2026-05-02T12:07:59","date_gmt":"2026-05-02T12:07:59","guid":{"rendered":"https:\/\/www.mathros.net.ua\/en\/?page_id=3489"},"modified":"2026-05-02T13:14:36","modified_gmt":"2026-05-02T13:14:36","slug":"golden-section-method-calculator","status":"publish","type":"page","link":"https:\/\/www.mathros.net.ua\/en\/golden-section-method-calculator","title":{"rendered":"<center>Golden Section Method Calculator: Simple Online Tool<\/center>"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3489\" class=\"elementor elementor-3489\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c23dc20 e-flex e-con-boxed e-con e-parent\" data-id=\"c23dc20\" 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-f3df915 elementor-widget elementor-widget-html\" data-id=\"f3df915\" 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 -->\r\n<script\r\n  type=\"text\/javascript\"\r\n  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<div class=\"gsa-wrap\">\r\n  <section class=\"gsa-app\">\r\n    <header class=\"gsa-topbar\">\r\n      <div class=\"gsa-topbar__main\">\r\n        <div class=\"gsa-kicker\">Online tool<\/div>\r\n        <h2 class=\"gsa-title\">Golden Section Method<\/h2>\r\n        <p class=\"gsa-subtitle\">\r\n          Enter a function in LaTeX format, set the interval and accuracy. The tool\r\n          will find the minimum and show a summary, a step-by-step solution, an iteration\r\n          table, and a graph for each step.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"gsa-topbar__chips\">\r\n        <span class=\"gsa-chip\">LaTeX<\/span>\r\n        <span class=\"gsa-chip\">Step-by-step<\/span>\r\n        <span class=\"gsa-chip\">Table<\/span>\r\n        <span class=\"gsa-chip\">Graph<\/span>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <section class=\"gsa-section\">\r\n      <div class=\"gsa-section__head\">\r\n        <h3 class=\"gsa-section__title\">Input Parameters<\/h3>\r\n        <div class=\"gsa-section__desc\">Enter the problem details to start the calculation<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"gsa-grid\">\r\n        <div class=\"gsa-field gsa-field--wide\">\r\n          <label for=\"gsgFunctionLatex\">Function in LaTeX<\/label>\r\n          <textarea\r\n            id=\"gsgFunctionLatex\"\r\n            rows=\"4\"\r\n            placeholder=\"(x-2)^2+1\"\r\n            spellcheck=\"false\"\r\n            autocomplete=\"off\"\r\n            aria-label=\"Function input field in LaTeX format\"\r\n          ><\/textarea>\r\n          <div class=\"gsa-helptext\">\r\n            The tool supports, among others:\r\n            \\(\\sin,\\cos,\\tan,\\cot,\\sec,\\csc,\\ln,\\log,\\lg,\\arcsin,\\arccos,\\arctan,\\sqrt{\\phantom{x}}, |x|, \\exp(x)\\)\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gsa-field\">\r\n          <label for=\"gsgIntervalA\">Start of the interval \\(a\\)<\/label>\r\n          <input type=\"text\" id=\"gsgIntervalA\" value=\"0\" inputmode=\"decimal\" \/>\r\n        <\/div>\r\n\r\n        <div class=\"gsa-field\">\r\n          <label for=\"gsgIntervalB\">End of the interval \\(b\\)<\/label>\r\n          <input type=\"text\" id=\"gsgIntervalB\" value=\"5\" inputmode=\"decimal\" \/>\r\n        <\/div>\r\n\r\n        <div class=\"gsa-field\">\r\n          <label for=\"gsgEpsValue\">Accuracy \\(\\varepsilon\\)<\/label>\r\n          <select id=\"gsgEpsValue\" aria-label=\"Select accuracy\">\r\n            <option value=\"0.1\">0.1<\/option>\r\n            <option value=\"0.01\">0.01<\/option>\r\n            <option value=\"0.001\">0.001<\/option>\r\n            <option value=\"0.0001\" selected>0.0001<\/option>\r\n            <option value=\"0.00001\">0.00001<\/option>\r\n            <option value=\"0.000001\">0.000001<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"gsa-field\">\r\n          <label for=\"gsgMaxIterValue\">Max. iterations<\/label>\r\n          <select id=\"gsgMaxIterValue\" aria-label=\"Select the maximum number of iterations\">\r\n            <option value=\"20\">20<\/option>\r\n            <option value=\"30\">30<\/option>\r\n            <option value=\"40\">40<\/option>\r\n            <option value=\"50\" selected>50<\/option>\r\n            <option value=\"80\">80<\/option>\r\n            <option value=\"100\">100<\/option>\r\n            <option value=\"150\">150<\/option>\r\n            <option value=\"200\">200<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"gsa-field\">\r\n          <label for=\"gsgExampleSelect\">Quick example<\/label>\r\n          <select id=\"gsgExampleSelect\">\r\n            <option value=\"\">Choose an example<\/option>\r\n            <option data-a=\"0\" data-b=\"5\" data-eps=\"0.0001\" data-iter=\"50\" value=\"(x-2)^2+1\">\\((x-2)^2+1\\)<\/option>\r\n            <option data-a=\"-1\" data-b=\"4\" data-eps=\"0.0001\" data-iter=\"50\" value=\"x^2-4x+5\">\\(x^2-4x+5\\)<\/option>\r\n            <option data-a=\"0\" data-b=\"3\" data-eps=\"0.0001\" data-iter=\"50\" value=\"(x-1)^2+2\">\\((x-1)^2+2\\)<\/option>\r\n            <option data-a=\"-2\" data-b=\"2\" data-eps=\"0.0001\" data-iter=\"50\" value=\"\\exp(x)-x\">\\(\\exp(x)-x\\)<\/option>\r\n            <option data-a=\"0\" data-b=\"2\" data-eps=\"0.0001\" data-iter=\"50\" value=\"\\ln(x+1)+(x-1)^2\">\\(\\ln(x+1)+(x-1)^2\\)<\/option>\r\n            <option data-a=\"0\" data-b=\"3\" data-eps=\"0.0001\" data-iter=\"50\" value=\"\\sqrt{x+1}+(x-2)^2\">\\(\\sqrt{x+1}+(x-2)^2\\)<\/option>\r\n            <option data-a=\"-1\" data-b=\"2\" data-eps=\"0.0001\" data-iter=\"50\" value=\"|x-0.5|+x^2\">\\(|x-0.5|+x^2\\)<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"gsa-field\">\r\n          <label for=\"gsgAutoPreviewToggle\">Live preview<\/label>\r\n          <label class=\"gsa-switch\" aria-label=\"Turn live preview on or off\">\r\n            <input type=\"checkbox\" id=\"gsgAutoPreviewToggle\" checked \/>\r\n            <span class=\"gsa-switch__track\"><\/span>\r\n            <span class=\"gsa-switch__label\">On<\/span>\r\n          <\/label>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"gsa-actions\">\r\n        <button id=\"gsgGenerateBtn\" type=\"button\" class=\"gsa-btn gsa-btn--primary\">Find the Minimum<\/button>\r\n        <button id=\"gsgClearBtn\" type=\"button\" class=\"gsa-btn gsa-btn--secondary\">Clear<\/button>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <section class=\"gsa-section gsa-section--compact\">\r\n      <div class=\"gsa-section__head\">\r\n        <h3 class=\"gsa-section__title\">Problem Preview<\/h3>\r\n        <div class=\"gsa-section__desc\">Check your input before starting the calculation<\/div>\r\n      <\/div>\r\n\r\n      <div id=\"gsgPreviewCard\" class=\"gsa-preview\">\r\n        <div class=\"gsa-preview__label\">Current setup<\/div>\r\n        <div id=\"gsgPreviewFormula\" class=\"gsa-preview__formula\">\r\n          \\[\r\n            f(x)=(x-2)^2+1,\\quad x\\in[0,5],\\quad \\varepsilon=0.0001\r\n          \\]\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <details class=\"gsa-details\">\r\n        <summary>Input tips<\/summary>\r\n        <div class=\"gsa-details__body\">\r\n          <p><strong>What to enter:<\/strong> the function \\(f(x)\\), the interval \\([a,b]\\), the accuracy \\(\\varepsilon\\), and the maximum number of iterations.<\/p>\r\n          <p><strong>Important:<\/strong> for the method to work correctly, the function should be <strong>unimodal<\/strong> on the given interval.<\/p>\r\n          <p>The results are displayed with <strong>up to 6 decimal places<\/strong>.<\/p>\r\n        <\/div>\r\n      <\/details>\r\n    <\/section>\r\n\r\n    <div id=\"gsgError\" class=\"gsa-alert\" role=\"alert\" aria-live=\"polite\"><\/div>\r\n\r\n    <div id=\"gsgLoading\" class=\"gsa-loading\" style=\"display:none;\">\r\n      <div class=\"gsa-loading__title\">Running the calculation<\/div>\r\n      <div class=\"gsa-loading__text\">\r\n        Preparing the summary, steps, iteration table, and graph.\r\n      <\/div>\r\n      <div class=\"gsa-loading__skeleton\">\r\n        <div class=\"gsa-loading__line\"><\/div>\r\n        <div class=\"gsa-loading__line gsa-loading__line--mid\"><\/div>\r\n        <div class=\"gsa-loading__line gsa-loading__line--short\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"gsgResult\" class=\"gsa-result\" style=\"display:none;\"><\/div>\r\n  <\/section>\r\n<\/div>\r\n\r\n<style>\r\n.gsa-wrap{\r\n  --gsa-bg: #f5f8fb;\r\n  --gsa-card: #ffffff;\r\n  --gsa-soft: #f8fbfd;\r\n  --gsa-soft-2: #eef5f8;\r\n  --gsa-border: #dbe6ed;\r\n  --gsa-border-strong: #bfd0da;\r\n  --gsa-text: #0f1728;\r\n  --gsa-muted: #607487;\r\n  --gsa-accent: #0B638B;\r\n  --gsa-accent-hover: #095676;\r\n  --gsa-accent-soft: rgba(11,99,139,.10);\r\n  --gsa-accent-soft-2: rgba(11,99,139,.16);\r\n  --gsa-success: #0c7a43;\r\n  --gsa-success-soft: rgba(12,122,67,.10);\r\n  --gsa-warning: #8b5a00;\r\n  --gsa-warning-soft: rgba(139,90,0,.10);\r\n  --gsa-danger: #b9382f;\r\n  --gsa-danger-soft: rgba(185,56,47,.10);\r\n  --gsa-plot-red: #d93025;\r\n  --gsa-plot-red-soft: rgba(217,48,37,.12);\r\n  --gsa-radius: 14px;\r\n  --gsa-radius-sm: 10px;\r\n  --gsa-font: system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n\r\n  width: min(1180px, calc(100% - 24px));\r\n  max-width: 100%;\r\n  min-width: 0;\r\n  margin: 18px auto;\r\n  font-family: var(--gsa-font);\r\n  color: var(--gsa-text);\r\n  overflow-x: clip;\r\n}\r\n\r\n@supports not (overflow: clip){\r\n  .gsa-wrap{\r\n    overflow-x: hidden;\r\n  }\r\n}\r\n\r\n@media (prefers-color-scheme: dark){\r\n  .gsa-wrap{\r\n    --gsa-bg: #0f1720;\r\n    --gsa-card: #15222d;\r\n    --gsa-soft: #182833;\r\n    --gsa-soft-2: #1c2d39;\r\n    --gsa-border: #273947;\r\n    --gsa-border-strong: #355062;\r\n    --gsa-text: #e8f1f7;\r\n    --gsa-muted: #9cb0c0;\r\n    --gsa-accent: #58b6e4;\r\n    --gsa-accent-hover: #45a7d9;\r\n    --gsa-accent-soft: rgba(88,182,228,.14);\r\n    --gsa-accent-soft-2: rgba(88,182,228,.20);\r\n    --gsa-success: #5ad38f;\r\n    --gsa-success-soft: rgba(90,211,143,.14);\r\n    --gsa-warning: #f0bd5d;\r\n    --gsa-warning-soft: rgba(240,189,93,.14);\r\n    --gsa-danger: #ff8b86;\r\n    --gsa-danger-soft: rgba(255,139,134,.14);\r\n    --gsa-plot-red: #ff6b60;\r\n    --gsa-plot-red-soft: rgba(255,107,96,.16);\r\n  }\r\n}\r\n\r\n.gsa-wrap *,\r\n.gsa-wrap *::before,\r\n.gsa-wrap *::after{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.gsa-app,\r\n.gsa-section,\r\n.gsa-result,\r\n.gsa-result__header,\r\n.gsa-panel,\r\n.gsa-table-card,\r\n.gsa-graph-card,\r\n.gsa-preview,\r\n.gsa-graph-host{\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-app{\r\n  display:grid;\r\n  gap:14px;\r\n}\r\n\r\n.gsa-topbar,\r\n.gsa-section,\r\n.gsa-alert,\r\n.gsa-loading,\r\n.gsa-result__header,\r\n.gsa-panel,\r\n.gsa-table-card,\r\n.gsa-graph-card{\r\n  background: var(--gsa-card);\r\n  border: 1px solid var(--gsa-border);\r\n  border-radius: var(--gsa-radius);\r\n}\r\n\r\n.gsa-topbar{\r\n  padding: 18px;\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:flex-start;\r\n  gap:18px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-topbar__main{\r\n  min-width:0;\r\n  max-width:100%;\r\n}\r\n\r\n.gsa-kicker{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  min-height:26px;\r\n  padding:0 10px;\r\n  border-radius:999px;\r\n  background: var(--gsa-accent-soft);\r\n  color: var(--gsa-accent);\r\n  font-size:.76rem;\r\n  font-weight:700;\r\n  letter-spacing:.02em;\r\n  margin-bottom:10px;\r\n}\r\n\r\n.gsa-title{\r\n  margin:0 0 6px 0;\r\n  font-size: clamp(1.45rem, 1.15rem + .9vw, 1.9rem);\r\n  line-height:1.12;\r\n  font-weight:700;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-subtitle{\r\n  margin:0;\r\n  max-width:740px;\r\n  color:var(--gsa-muted);\r\n  line-height:1.6;\r\n  font-size:.95rem;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-topbar__chips{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n  justify-content:flex-end;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-chip{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  min-height:30px;\r\n  padding:0 10px;\r\n  border-radius:999px;\r\n  border:1px solid var(--gsa-border);\r\n  background: var(--gsa-soft);\r\n  font-size:.82rem;\r\n  font-weight:600;\r\n  white-space:nowrap;\r\n}\r\n\r\n.gsa-section{\r\n  padding:16px;\r\n}\r\n\r\n.gsa-section--compact{\r\n  padding-top:14px;\r\n  padding-bottom:14px;\r\n}\r\n\r\n.gsa-section__head{\r\n  margin-bottom:12px;\r\n}\r\n\r\n.gsa-section__title{\r\n  margin:0 0 3px 0;\r\n  font-size:1rem;\r\n  font-weight:700;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-section__desc{\r\n  color:var(--gsa-muted);\r\n  font-size:.89rem;\r\n  line-height:1.5;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(12, minmax(0, 1fr));\r\n  gap:12px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-field{\r\n  grid-column:span 3;\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:7px;\r\n  min-width:0;\r\n  max-width:100%;\r\n}\r\n\r\n.gsa-field--wide{\r\n  grid-column:1 \/ -1;\r\n}\r\n\r\n.gsa-field label{\r\n  font-size:.9rem;\r\n  font-weight:600;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-field input,\r\n.gsa-field textarea,\r\n.gsa-field select{\r\n  width:100%;\r\n  max-width:100%;\r\n  min-width:0;\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-card);\r\n  color: var(--gsa-text);\r\n  outline:none;\r\n  transition:border-color .16s ease, background-color .16s ease;\r\n}\r\n\r\n.gsa-field input,\r\n.gsa-field select{\r\n  height:42px;\r\n  padding:0 12px;\r\n  font-size:.94rem;\r\n  font-weight:600;\r\n}\r\n\r\n.gsa-field textarea{\r\n  min-height:112px;\r\n  padding:12px;\r\n  resize:vertical;\r\n  font: 600 14px\/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\r\n  overflow-x:auto;\r\n}\r\n\r\n.gsa-field input:hover,\r\n.gsa-field textarea:hover,\r\n.gsa-field select:hover{\r\n  border-color: var(--gsa-border-strong);\r\n}\r\n\r\n.gsa-field input:focus-visible,\r\n.gsa-field textarea:focus-visible,\r\n.gsa-field select:focus-visible{\r\n  border-color: var(--gsa-accent);\r\n  background: var(--gsa-soft);\r\n}\r\n\r\n.gsa-helptext{\r\n  color:var(--gsa-muted);\r\n  font-size:.85rem;\r\n  line-height:1.5;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-switch{\r\n  min-height:42px;\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-card);\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:0 12px;\r\n  cursor:pointer;\r\n  user-select:none;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-switch input{\r\n  position:absolute;\r\n  opacity:0;\r\n  pointer-events:none;\r\n}\r\n\r\n.gsa-switch__track{\r\n  width:40px;\r\n  height:22px;\r\n  border-radius:999px;\r\n  background:#c4d1d9;\r\n  position:relative;\r\n  flex:0 0 auto;\r\n  transition:background-color .2s ease;\r\n}\r\n\r\n.gsa-switch__track::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  top:3px;\r\n  left:3px;\r\n  width:16px;\r\n  height:16px;\r\n  border-radius:50%;\r\n  background:#fff;\r\n  transition:left .2s ease;\r\n}\r\n\r\n.gsa-switch input:checked + .gsa-switch__track{\r\n  background: var(--gsa-accent);\r\n}\r\n\r\n.gsa-switch input:checked + .gsa-switch__track::after{\r\n  left:21px;\r\n}\r\n\r\n.gsa-switch__label{\r\n  font-size:.9rem;\r\n  font-weight:600;\r\n}\r\n\r\n.gsa-actions{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n  margin-top:14px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-btn{\r\n  min-height:42px;\r\n  padding:0 14px;\r\n  border-radius:10px;\r\n  border:1px solid var(--gsa-border);\r\n  background: var(--gsa-card);\r\n  color: var(--gsa-text);\r\n  font-size:.93rem;\r\n  font-weight:700;\r\n  cursor:pointer;\r\n  transition:border-color .16s ease, background-color .16s ease, color .16s ease;\r\n}\r\n\r\n.gsa-btn:hover{\r\n  border-color: var(--gsa-border-strong);\r\n  background: var(--gsa-soft);\r\n}\r\n\r\n.gsa-btn--primary{\r\n  background: var(--gsa-accent);\r\n  border-color: var(--gsa-accent);\r\n  color:#fff;\r\n}\r\n\r\n.gsa-btn--primary:hover{\r\n  background: var(--gsa-accent-hover);\r\n  border-color: var(--gsa-accent-hover);\r\n}\r\n\r\n.gsa-btn:disabled{\r\n  opacity:.65;\r\n  cursor:not-allowed;\r\n}\r\n\r\n.gsa-preview{\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-soft);\r\n  padding:12px;\r\n}\r\n\r\n.gsa-preview__label{\r\n  color:var(--gsa-muted);\r\n  font-size:.82rem;\r\n  font-weight:600;\r\n  margin-bottom:7px;\r\n}\r\n\r\n.gsa-preview__formula{\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-card);\r\n  padding:12px 14px;\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}\r\n\r\n.gsa-details{\r\n  margin-top:12px;\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-soft);\r\n  padding:10px 12px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-details > summary{\r\n  cursor:pointer;\r\n  font-weight:700;\r\n  list-style:none;\r\n  font-size:.92rem;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-details > summary::-webkit-details-marker{\r\n  display:none;\r\n}\r\n\r\n.gsa-details > summary::before{\r\n  content:\"\u25b8\";\r\n  display:inline-block;\r\n  margin-right:8px;\r\n}\r\n\r\n.gsa-details[open] > summary::before{\r\n  content:\"\u25be\";\r\n}\r\n\r\n.gsa-details__body{\r\n  margin-top:10px;\r\n  color:var(--gsa-muted);\r\n  line-height:1.6;\r\n  font-size:.92rem;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-details__body p{\r\n  margin:0 0 8px 0;\r\n}\r\n\r\n.gsa-alert{\r\n  display:none;\r\n  padding:12px 14px;\r\n  color:var(--gsa-danger);\r\n  background: var(--gsa-danger-soft);\r\n  font-size:.93rem;\r\n  font-weight:600;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-alert.show{\r\n  display:block;\r\n}\r\n\r\n.gsa-loading{\r\n  padding:16px;\r\n  text-align:center;\r\n}\r\n\r\n.gsa-loading__title{\r\n  font-size:.98rem;\r\n  font-weight:700;\r\n  margin-bottom:6px;\r\n}\r\n\r\n.gsa-loading__text{\r\n  color:var(--gsa-muted);\r\n  line-height:1.55;\r\n  margin-bottom:12px;\r\n  font-size:.92rem;\r\n}\r\n\r\n.gsa-loading__skeleton{\r\n  display:grid;\r\n  gap:8px;\r\n  max-width:520px;\r\n  margin:0 auto;\r\n}\r\n\r\n.gsa-loading__line{\r\n  height:9px;\r\n  border-radius:999px;\r\n  background: var(--gsa-soft-2);\r\n  border:1px solid var(--gsa-border);\r\n}\r\n\r\n.gsa-loading__line--mid{\r\n  width:82%;\r\n  margin:0 auto;\r\n}\r\n\r\n.gsa-loading__line--short{\r\n  width:62%;\r\n  margin:0 auto;\r\n}\r\n\r\n.gsa-result{\r\n  display:grid;\r\n  gap:14px;\r\n}\r\n\r\n.gsa-result__header{\r\n  padding:16px;\r\n}\r\n\r\n.gsa-result__head{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:flex-start;\r\n  gap:14px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-result__head > div{\r\n  min-width:0;\r\n  max-width:100%;\r\n}\r\n\r\n.gsa-result__title{\r\n  margin:0;\r\n  font-size:1.08rem;\r\n  font-weight:700;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-result__meta{\r\n  margin-top:8px;\r\n  color:var(--gsa-muted);\r\n  font-size:.87rem;\r\n  line-height:1.55;\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:6px 8px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-result__meta code{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  max-width:100%;\r\n  min-width:0;\r\n  padding:2px 6px;\r\n  border-radius:6px;\r\n  background:var(--gsa-soft);\r\n  border:1px solid var(--gsa-border);\r\n  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\r\n  font-size:.84rem;\r\n  white-space:nowrap;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-status{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  min-height:34px;\r\n  padding:0 11px;\r\n  border-radius:999px;\r\n  font-size:.82rem;\r\n  font-weight:700;\r\n  border:1px solid var(--gsa-border);\r\n  white-space:nowrap;\r\n  flex:0 0 auto;\r\n}\r\n\r\n.gsa-status--success{\r\n  color:var(--gsa-success);\r\n  background: var(--gsa-success-soft);\r\n}\r\n\r\n.gsa-status--warn{\r\n  color:var(--gsa-warning);\r\n  background: var(--gsa-warning-soft);\r\n}\r\n\r\n.gsa-tabs{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n  margin-top:12px;\r\n  padding-top:12px;\r\n  border-top:1px solid var(--gsa-border);\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-tab{\r\n  min-height:34px;\r\n  padding:0 12px;\r\n  border-radius:9px;\r\n  border:1px solid var(--gsa-border);\r\n  background: var(--gsa-card);\r\n  color:var(--gsa-text);\r\n  font-weight:700;\r\n  font-size:.9rem;\r\n  cursor:pointer;\r\n  transition:border-color .16s ease, background-color .16s ease, color .16s ease;\r\n}\r\n\r\n.gsa-tab:hover{\r\n  border-color: var(--gsa-accent);\r\n  color: var(--gsa-accent);\r\n}\r\n\r\n.gsa-tab.is-active{\r\n  border-color: var(--gsa-accent);\r\n  color: var(--gsa-accent);\r\n  background: var(--gsa-accent-soft);\r\n}\r\n\r\n.gsa-panels{\r\n  display:grid;\r\n  gap:14px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-panel{\r\n  display:none;\r\n  padding:16px;\r\n}\r\n\r\n.gsa-panel.is-active{\r\n  display:block;\r\n}\r\n\r\n.gsa-kpis{\r\n  display:grid;\r\n  grid-template-columns:repeat(4, minmax(0, 1fr));\r\n  gap:10px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-kpi{\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-card);\r\n  padding:12px;\r\n  min-width:0;\r\n  max-width:100%;\r\n}\r\n\r\n.gsa-kpi__label{\r\n  color:var(--gsa-muted);\r\n  font-size:.8rem;\r\n  font-weight:600;\r\n  margin-bottom:7px;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-kpi__value{\r\n  font-size:.98rem;\r\n  font-weight:700;\r\n  word-break:break-word;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-kpi__value code{\r\n  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-final-formula{\r\n  margin-top:12px;\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-soft);\r\n  padding:12px;\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}\r\n\r\n.gsa-note{\r\n  margin-top:12px;\r\n  color:var(--gsa-muted);\r\n  line-height:1.6;\r\n  font-size:.89rem;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-note code{\r\n  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-steps{\r\n  display:grid;\r\n  gap:10px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-step{\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-card);\r\n  overflow:hidden;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-step__head{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:10px 12px;\r\n  border-bottom:1px solid var(--gsa-border);\r\n  background: var(--gsa-soft);\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-step__index{\r\n  width:30px;\r\n  height:30px;\r\n  border-radius:8px;\r\n  border:1px solid var(--gsa-border);\r\n  background: var(--gsa-card);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:.86rem;\r\n  font-weight:800;\r\n  color:var(--gsa-accent);\r\n  flex:0 0 auto;\r\n}\r\n\r\n.gsa-step__title{\r\n  font-size:.98rem;\r\n  line-height:1.35;\r\n  font-weight:800;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-step__body{\r\n  padding:12px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-step__body p{\r\n  margin:0 0 8px 0;\r\n  line-height:1.6;\r\n  font-size:.93rem;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-formula{\r\n  margin-top:9px;\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-soft);\r\n  padding:11px;\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}\r\n\r\n.gsa-table-card{\r\n  padding:12px;\r\n}\r\n\r\n.gsa-table-title{\r\n  font-size:.98rem;\r\n  font-weight:700;\r\n  margin-bottom:10px;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-scroll-x{\r\n  max-width:100%;\r\n  min-width:0;\r\n  overflow-x:auto;\r\n  overflow-y:hidden;\r\n  -webkit-overflow-scrolling:touch;\r\n}\r\n\r\n.gsa-scroll-x table{\r\n  width:100%;\r\n  min-width:760px;\r\n  border-collapse:separate;\r\n  border-spacing:0;\r\n  font-size:.9rem;\r\n}\r\n\r\n.gsa-scroll-x th,\r\n.gsa-scroll-x td{\r\n  border-right:1px solid var(--gsa-border);\r\n  border-bottom:1px solid var(--gsa-border);\r\n  padding:9px 10px;\r\n  text-align:left;\r\n  vertical-align:top;\r\n}\r\n\r\n.gsa-scroll-x th{\r\n  background: var(--gsa-soft);\r\n  font-weight:700;\r\n  position:sticky;\r\n  top:0;\r\n  z-index:1;\r\n}\r\n\r\n.gsa-scroll-x tr > *:first-child{\r\n  border-left:1px solid var(--gsa-border);\r\n}\r\n\r\n.gsa-scroll-x tr:first-child > *{\r\n  border-top:1px solid var(--gsa-border);\r\n}\r\n\r\n.gsa-scroll-x thead th:first-child{\r\n  border-top-left-radius:8px;\r\n}\r\n\r\n.gsa-scroll-x thead th:last-child{\r\n  border-top-right-radius:8px;\r\n}\r\n\r\n.gsa-scroll-x tbody tr:last-child td:first-child{\r\n  border-bottom-left-radius:8px;\r\n}\r\n\r\n.gsa-scroll-x tbody tr:last-child td:last-child{\r\n  border-bottom-right-radius:8px;\r\n}\r\n\r\n.gsa-empty{\r\n  border:1px dashed var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-soft);\r\n  padding:12px;\r\n  color:var(--gsa-muted);\r\n  line-height:1.6;\r\n  font-size:.92rem;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-graph-card{\r\n  padding:12px;\r\n}\r\n\r\n.gsa-graph-card__title{\r\n  font-size:.98rem;\r\n  font-weight:700;\r\n  margin-bottom:6px;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-graph-card__subtitle{\r\n  color:var(--gsa-muted);\r\n  line-height:1.55;\r\n  font-size:.9rem;\r\n  margin-bottom:12px;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-graph-nav{\r\n  display:grid;\r\n  grid-template-columns:auto 1fr auto;\r\n  gap:8px;\r\n  align-items:center;\r\n  margin-bottom:12px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-graph-nav__btn{\r\n  min-height:36px;\r\n  padding:0 12px;\r\n  border-radius:9px;\r\n  border:1px solid var(--gsa-border);\r\n  background: var(--gsa-card);\r\n  color:var(--gsa-text);\r\n  font-weight:700;\r\n  font-size:.88rem;\r\n  cursor:pointer;\r\n  transition:border-color .16s ease, background-color .16s ease, color .16s ease;\r\n}\r\n\r\n.gsa-graph-nav__btn:hover{\r\n  border-color: var(--gsa-accent);\r\n  color: var(--gsa-accent);\r\n  background: var(--gsa-soft);\r\n}\r\n\r\n.gsa-graph-nav__btn:disabled{\r\n  opacity:.5;\r\n  cursor:not-allowed;\r\n}\r\n\r\n.gsa-graph-nav__state{\r\n  min-height:36px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  text-align:center;\r\n  padding:0 10px;\r\n  border-radius:9px;\r\n  border:1px solid var(--gsa-border);\r\n  background: var(--gsa-soft);\r\n  font-weight:700;\r\n  font-size:.89rem;\r\n  min-width:0;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-graph-metrics{\r\n  display:grid;\r\n  grid-template-columns:repeat(4, minmax(0, 1fr));\r\n  gap:10px;\r\n  margin-bottom:12px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-graph-metric{\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-card);\r\n  padding:10px;\r\n  min-width:0;\r\n  max-width:100%;\r\n}\r\n\r\n.gsa-graph-metric__label{\r\n  display:block;\r\n  color:var(--gsa-muted);\r\n  font-size:.78rem;\r\n  font-weight:600;\r\n  margin-bottom:7px;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-graph-metric__value{\r\n  display:block;\r\n  font-size:.9rem;\r\n  font-weight:700;\r\n  word-break:break-word;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-graph-metric__value code{\r\n  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n.gsa-graph-legend{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:8px;\r\n  margin-bottom:12px;\r\n  max-width:100%;\r\n  min-width:0;\r\n}\r\n\r\n.gsa-legend-chip{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:8px;\r\n  min-height:30px;\r\n  padding:0 10px;\r\n  border-radius:999px;\r\n  border:1px solid var(--gsa-border);\r\n  background: var(--gsa-soft);\r\n  font-size:.82rem;\r\n  font-weight:600;\r\n  max-width:100%;\r\n}\r\n\r\n.gsa-legend-chip::before{\r\n  content:\"\";\r\n  width:10px;\r\n  height:10px;\r\n  border-radius:50%;\r\n  display:inline-block;\r\n  flex:0 0 auto;\r\n}\r\n\r\n.gsa-legend-chip--curve::before{ background:#0B638B; }\r\n.gsa-legend-chip--min::before{ background:#0c7a43; }\r\n.gsa-legend-chip--x1x2::before{ background:var(--gsa-plot-red); }\r\n\r\n.gsa-graph-host{\r\n  border:1px solid var(--gsa-border);\r\n  border-radius:10px;\r\n  background: var(--gsa-card);\r\n  padding:8px;\r\n  overflow:hidden;\r\n}\r\n\r\n.gsa-plot-svg{\r\n  display:block;\r\n  width:100%;\r\n  max-width:100%;\r\n  height:auto;\r\n}\r\n\r\n.gsa-svg-grid{\r\n  stroke: rgba(120,136,153,.18);\r\n  stroke-width:1;\r\n}\r\n\r\n.gsa-svg-axis{\r\n  stroke: rgba(100,116,139,.48);\r\n  stroke-width:1.2;\r\n}\r\n\r\n.gsa-svg-label{\r\n  fill: currentColor;\r\n  font-size:12px;\r\n  opacity:.82;\r\n}\r\n\r\n.gsa-svg-axis-title{\r\n  fill: currentColor;\r\n  font-size:13px;\r\n  font-weight:700;\r\n}\r\n\r\n.gsa-svg-curve{\r\n  fill:none;\r\n  stroke:#0B638B;\r\n  stroke-width:3;\r\n  stroke-linecap:round;\r\n  stroke-linejoin:round;\r\n}\r\n\r\n.gsa-svg-min-line{\r\n  stroke:#0c7a43;\r\n  stroke-width:1.5;\r\n  stroke-dasharray:6 4;\r\n}\r\n\r\n.gsa-svg-min-point{\r\n  fill:#0c7a43;\r\n  stroke:#ffffff;\r\n  stroke-width:2;\r\n}\r\n\r\n.gsa-svg-x1x2-line{\r\n  stroke:var(--gsa-plot-red);\r\n  stroke-width:1.5;\r\n  stroke-dasharray:5 4;\r\n}\r\n\r\n.gsa-svg-x1-point,\r\n.gsa-svg-x2-point{\r\n  fill:var(--gsa-plot-red);\r\n  stroke:#ffffff;\r\n  stroke-width:2;\r\n}\r\n\r\n.gsa-svg-annot{\r\n  fill: currentColor;\r\n  font-size:12px;\r\n  font-weight:700;\r\n}\r\n\r\n.gsa-invalid{\r\n  border-color: var(--gsa-danger) !important;\r\n  background: rgba(185,56,47,.03) !important;\r\n}\r\n\r\n\/* MathJax overflow protection *\/\r\n.gsa-preview__formula .MathJax_Display,\r\n.gsa-final-formula .MathJax_Display,\r\n.gsa-formula .MathJax_Display{\r\n  max-width:100%;\r\n  overflow-x:auto;\r\n  overflow-y:hidden;\r\n}\r\n\r\n.gsa-preview__formula mjx-container,\r\n.gsa-final-formula mjx-container,\r\n.gsa-formula mjx-container{\r\n  max-width:100%;\r\n  overflow-x:auto;\r\n  overflow-y:hidden;\r\n}\r\n\r\n\/* SVG and media elements protection *\/\r\n.gsa-wrap svg,\r\n.gsa-wrap img,\r\n.gsa-wrap canvas{\r\n  max-width:100%;\r\n}\r\n\r\n\/* Long text\/code protection *\/\r\n.gsa-wrap code,\r\n.gsa-wrap pre{\r\n  max-width:100%;\r\n  overflow-wrap:anywhere;\r\n}\r\n\r\n@media (prefers-color-scheme: dark){\r\n  .gsa-svg-grid{ stroke: rgba(170,190,208,.14); }\r\n  .gsa-svg-axis{ stroke: rgba(170,190,208,.34); }\r\n  .gsa-svg-curve{ stroke:#58b6e4; }\r\n}\r\n\r\n@media (max-width: 980px){\r\n  .gsa-grid{\r\n    grid-template-columns:repeat(6, minmax(0, 1fr));\r\n  }\r\n\r\n  .gsa-field{\r\n    grid-column:span 3;\r\n  }\r\n\r\n  .gsa-kpis,\r\n  .gsa-graph-metrics{\r\n    grid-template-columns:repeat(2, minmax(0, 1fr));\r\n  }\r\n\r\n  .gsa-topbar,\r\n  .gsa-result__head{\r\n    flex-direction:column;\r\n  }\r\n\r\n  .gsa-topbar__chips{\r\n    justify-content:flex-start;\r\n  }\r\n\r\n  .gsa-status{\r\n    align-self:flex-start;\r\n  }\r\n}\r\n\r\n@media (max-width: 680px){\r\n  .gsa-wrap{\r\n    width:min(100%, calc(100% - 16px));\r\n    margin:12px auto;\r\n  }\r\n\r\n  .gsa-topbar,\r\n  .gsa-section,\r\n  .gsa-result__header,\r\n  .gsa-panel{\r\n    border-radius:12px;\r\n  }\r\n\r\n  .gsa-topbar,\r\n  .gsa-section,\r\n  .gsa-result__header,\r\n  .gsa-panel{\r\n    padding:14px;\r\n  }\r\n\r\n  .gsa-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .gsa-field,\r\n  .gsa-field--wide{\r\n    grid-column:1 \/ -1;\r\n  }\r\n\r\n  .gsa-actions{\r\n    flex-direction:column;\r\n  }\r\n\r\n  .gsa-btn{\r\n    width:100%;\r\n  }\r\n\r\n  .gsa-kpis,\r\n  .gsa-graph-metrics{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .gsa-graph-nav{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .gsa-graph-nav__btn,\r\n  .gsa-graph-nav__state{\r\n    width:100%;\r\n  }\r\n\r\n  .gsa-result__meta{\r\n    gap:7px;\r\n  }\r\n\r\n  .gsa-status{\r\n    width:100%;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px){\r\n  .gsa-title{\r\n    font-size:1.35rem;\r\n  }\r\n\r\n  .gsa-subtitle{\r\n    font-size:.9rem;\r\n    line-height:1.55;\r\n  }\r\n\r\n  .gsa-chip{\r\n    min-height:28px;\r\n    padding:0 8px;\r\n    font-size:.78rem;\r\n  }\r\n\r\n  .gsa-tabs{\r\n    gap:8px;\r\n  }\r\n\r\n  .gsa-tab{\r\n    flex:1 1 calc(50% - 8px);\r\n    text-align:center;\r\n    justify-content:center;\r\n    padding:0 8px;\r\n    font-size:.86rem;\r\n  }\r\n\r\n  .gsa-result__meta{\r\n    display:grid;\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .gsa-result__meta code{\r\n    width:100%;\r\n    white-space:normal;\r\n  }\r\n\r\n  .gsa-preview__formula,\r\n  .gsa-final-formula,\r\n  .gsa-formula{\r\n    padding:10px;\r\n  }\r\n\r\n  .gsa-scroll-x table{\r\n    min-width:720px;\r\n    font-size:.86rem;\r\n  }\r\n\r\n  .gsa-scroll-x th,\r\n  .gsa-scroll-x td{\r\n    padding:8px;\r\n  }\r\n\r\n  .gsa-graph-card{\r\n    padding:10px;\r\n  }\r\n\r\n  .gsa-graph-host{\r\n    padding:6px;\r\n  }\r\n\r\n  .gsa-legend-chip{\r\n    min-height:28px;\r\n    padding:0 8px;\r\n    font-size:.78rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 380px){\r\n  .gsa-tab{\r\n    flex:1 1 100%;\r\n  }\r\n\r\n  .gsa-chip{\r\n    flex:1 1 calc(50% - 8px);\r\n    justify-content:center;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce){\r\n  .gsa-wrap *,\r\n  .gsa-wrap *::before,\r\n  .gsa-wrap *::after{\r\n    transition:none !important;\r\n    animation:none !important;\r\n    scroll-behavior:auto !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(() => {\r\n  let activeController = null;\r\n\r\n  const AJAX_URL = (typeof window !== 'undefined' && window.ajaxurl)\r\n    ? window.ajaxurl\r\n    : '\/en\/wp-admin\/admin-ajax.php';\r\n\r\n  const SERVER_PRECISION = 6;\r\n\r\n  const ids = {\r\n    functionLatex: 'gsgFunctionLatex',\r\n    intervalA: 'gsgIntervalA',\r\n    intervalB: 'gsgIntervalB',\r\n    epsValue: 'gsgEpsValue',\r\n    maxIterValue: 'gsgMaxIterValue',\r\n    exampleSelect: 'gsgExampleSelect',\r\n    autoPreviewToggle: 'gsgAutoPreviewToggle',\r\n    previewCard: 'gsgPreviewCard',\r\n    previewFormula: 'gsgPreviewFormula',\r\n    error: 'gsgError',\r\n    loading: 'gsgLoading',\r\n    result: 'gsgResult',\r\n    generateBtn: 'gsgGenerateBtn',\r\n    clearBtn: 'gsgClearBtn'\r\n  };\r\n\r\n  function $(id){\r\n    return document.getElementById(id);\r\n  }\r\n\r\n  function escapeHtml(value){\r\n    return String(value ?? '').replace(\/[&<>\"']\/g, m => ({\r\n      '&':'&amp;',\r\n      '<':'&lt;',\r\n      '>':'&gt;',\r\n      '\"':'&quot;',\r\n      \"'\":'&#39;'\r\n    }[m]));\r\n  }\r\n\r\n  function renderMath(container, tries = 12){\r\n    const el = container || $(ids.result);\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\r\n    if (tries > 0){\r\n      setTimeout(() => renderMath(el, tries - 1), 120);\r\n    }\r\n  }\r\n\r\n  function setLoading(isLoading){\r\n    const el = $(ids.loading);\r\n    if (el) el.style.display = isLoading ? 'block' : 'none';\r\n  }\r\n\r\n  function setGenerateDisabled(disabled){\r\n    const btn = $(ids.generateBtn);\r\n    if (btn) btn.disabled = !!disabled;\r\n  }\r\n\r\n  function showError(message){\r\n    const el = $(ids.error);\r\n    if (!el) return;\r\n\r\n    el.textContent = message || 'Something went wrong.';\r\n    el.classList.add('show');\r\n  }\r\n\r\n  function clearError(){\r\n    const el = $(ids.error);\r\n    if (!el) return;\r\n\r\n    el.textContent = '';\r\n    el.classList.remove('show');\r\n  }\r\n\r\n  function getFieldValue(id){\r\n    const el = $(id);\r\n    return el ? String(el.value || '').trim() : '';\r\n  }\r\n\r\n  function setFieldValue(id, value){\r\n    const el = $(id);\r\n    if (el) el.value = value ?? '';\r\n  }\r\n\r\n  function getExpression(){\r\n    return getFieldValue(ids.functionLatex);\r\n  }\r\n\r\n  function setExpression(value){\r\n    const el = $(ids.functionLatex);\r\n    if (el) el.value = value || '';\r\n  }\r\n\r\n  function clearInputsError(){\r\n    [\r\n      ids.functionLatex,\r\n      ids.intervalA,\r\n      ids.intervalB,\r\n      ids.epsValue,\r\n      ids.maxIterValue\r\n    ].forEach(id => {\r\n      const el = $(id);\r\n      if (el) el.classList.remove('gsa-invalid');\r\n    });\r\n  }\r\n\r\n  function markInputError(id){\r\n    const el = $(id);\r\n    if (el) el.classList.add('gsa-invalid');\r\n  }\r\n\r\n  function clearResult(){\r\n    const result = $(ids.result);\r\n    if (result){\r\n      result.innerHTML = '';\r\n      result.style.display = 'none';\r\n    }\r\n  }\r\n\r\n  function updateToggleLabel(){\r\n    const toggle = $(ids.autoPreviewToggle);\r\n    const label = toggle?.closest('.gsa-switch')?.querySelector('.gsa-switch__label');\r\n\r\n    if (!toggle || !label) return;\r\n\r\n    label.textContent = toggle.checked ? 'On' : 'Off';\r\n  }\r\n\r\n  function updatePreview(){\r\n    const toggle = $(ids.autoPreviewToggle);\r\n    const card = $(ids.previewCard);\r\n    const formula = $(ids.previewFormula);\r\n\r\n    if (!toggle || !card || !formula) return;\r\n\r\n    if (!toggle.checked){\r\n      card.style.display = 'none';\r\n      return;\r\n    }\r\n\r\n    card.style.display = 'block';\r\n\r\n    const expr = getExpression();\r\n    const a = getFieldValue(ids.intervalA) || '?';\r\n    const b = getFieldValue(ids.intervalB) || '?';\r\n    const eps = getFieldValue(ids.epsValue) || '?';\r\n\r\n    if (!expr){\r\n      formula.innerHTML = '\\\\[ f(x)=\\\\text{enter a function},\\\\quad x\\\\in[' + a + ',' + b + '],\\\\quad \\\\varepsilon=' + eps + ' \\\\]';\r\n      renderMath(card);\r\n      return;\r\n    }\r\n\r\n    formula.innerHTML = '\\\\[ f(x)=' + expr + ',\\\\quad x\\\\in[' + a + ',' + b + '],\\\\quad \\\\varepsilon=' + eps + ' \\\\]';\r\n    renderMath(card);\r\n  }\r\n\r\n  function buildStatusBadge(status){\r\n    if (status === 'max_iter'){\r\n      return '<div class=\"gsa-status gsa-status--warn\">Iteration limit reached<\/div>';\r\n    }\r\n\r\n    return '<div class=\"gsa-status gsa-status--success\">Target accuracy reached<\/div>';\r\n  }\r\n\r\n  function buildOverviewPanel(summary){\r\n    const latex = summary?.latex || '';\r\n\r\n    return `\r\n      <section class=\"gsa-panel is-active\" data-panel=\"overview\">\r\n        <div class=\"gsa-kpis\">\r\n          <div class=\"gsa-kpi\">\r\n            <div class=\"gsa-kpi__label\">Approximate minimum point<\/div>\r\n            <div class=\"gsa-kpi__value\"><code>${escapeHtml(summary?.x_min ?? '')}<\/code><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gsa-kpi\">\r\n            <div class=\"gsa-kpi__label\">Approximate minimum value<\/div>\r\n            <div class=\"gsa-kpi__value\"><code>${escapeHtml(summary?.f_min ?? '')}<\/code><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gsa-kpi\">\r\n            <div class=\"gsa-kpi__label\">Number of iterations<\/div>\r\n            <div class=\"gsa-kpi__value\"><code>${escapeHtml(summary?.iterations ?? '')}<\/code><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gsa-kpi\">\r\n            <div class=\"gsa-kpi__label\">Final interval<\/div>\r\n            <div class=\"gsa-kpi__value\"><code>[${escapeHtml(summary?.interval?.a ?? '')}, ${escapeHtml(summary?.interval?.b ?? '')}]<\/code><\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gsa-final-formula\">${latex}<\/div>\r\n      <\/section>\r\n    `;\r\n  }\r\n\r\n  function buildStepsPanel(texts, forms, titles){\r\n    const n = Math.max(texts.length, forms.length, titles.length);\r\n    let html = '<section class=\"gsa-panel\" data-panel=\"steps\"><div class=\"gsa-steps\">';\r\n\r\n    for (let i = 0; i < n; i++){\r\n      const stepTitle = titles[i] ? escapeHtml(titles[i]) : `Step ${i + 1}`;\r\n\r\n      html += `\r\n        <article class=\"gsa-step\">\r\n          <div class=\"gsa-step__head\">\r\n            <div class=\"gsa-step__index\">${i + 1}<\/div>\r\n            <div class=\"gsa-step__title\">${stepTitle}<\/div>\r\n          <\/div>\r\n          <div class=\"gsa-step__body\">\r\n            ${texts[i] ? texts[i] : '<p>Step description is not available.<\/p>'}\r\n            ${forms[i] ? `<div class=\"gsa-formula\">${forms[i]}<\/div>` : ''}\r\n          <\/div>\r\n        <\/article>\r\n      `;\r\n    }\r\n\r\n    html += '<\/div><\/section>';\r\n    return html;\r\n  }\r\n\r\n  function buildTablePanel(summary){\r\n    return `\r\n      <section class=\"gsa-panel\" data-panel=\"table\">\r\n        <div class=\"gsa-table-card\">\r\n          <div class=\"gsa-table-title\">Iteration Table<\/div>\r\n          ${\r\n            summary?.table_html\r\n              ? `<div class=\"gsa-scroll-x\">${summary.table_html}<\/div>`\r\n              : `<div class=\"gsa-empty\">The iteration table is not available in the server response.<\/div>`\r\n          }\r\n        <\/div>\r\n      <\/section>\r\n    `;\r\n  }\r\n\r\n  function buildGraphPanel(summary){\r\n    return `\r\n      <section class=\"gsa-panel\" data-panel=\"graph\">\r\n        <div class=\"gsa-graph-card\">\r\n          <div class=\"gsa-graph-card__title\">Iteration Graph<\/div>\r\n          <div class=\"gsa-graph-card__subtitle\">\r\n            Switch between the method iterations to see the function on the current\r\n            search interval and understand how the interval becomes smaller step by step.\r\n          <\/div>\r\n\r\n          <div class=\"gsa-graph-nav\">\r\n            <button type=\"button\" class=\"gsa-graph-nav__btn\" data-plot-prev>\u2190 Previous<\/button>\r\n            <div class=\"gsa-graph-nav__state\" data-plot-state>Iteration<\/div>\r\n            <button type=\"button\" class=\"gsa-graph-nav__btn\" data-plot-next>Next \u2192<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"gsa-graph-metrics\">\r\n            <div class=\"gsa-graph-metric\">\r\n              <span class=\"gsa-graph-metric__label\">Current interval<\/span>\r\n              <span class=\"gsa-graph-metric__value\" data-plot-interval><code>\u2014<\/code><\/span>\r\n            <\/div>\r\n\r\n            <div class=\"gsa-graph-metric\">\r\n              <span class=\"gsa-graph-metric__label\">Current x\u2081 and x\u2082<\/span>\r\n              <span class=\"gsa-graph-metric__value\" data-plot-points><code>\u2014<\/code><\/span>\r\n            <\/div>\r\n\r\n            <div class=\"gsa-graph-metric\">\r\n              <span class=\"gsa-graph-metric__label\">Current f(x\u2081) and f(x\u2082)<\/span>\r\n              <span class=\"gsa-graph-metric__value\" data-plot-values><code>\u2014<\/code><\/span>\r\n            <\/div>\r\n\r\n            <div class=\"gsa-graph-metric\">\r\n              <span class=\"gsa-graph-metric__label\">Decision at this iteration<\/span>\r\n              <span class=\"gsa-graph-metric__value\" data-plot-decision><code>\u2014<\/code><\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"gsa-graph-legend\">\r\n            <span class=\"gsa-legend-chip gsa-legend-chip--curve\">Curve f(x)<\/span>\r\n            <span class=\"gsa-legend-chip gsa-legend-chip--min\">Final minimum<\/span>\r\n            <span class=\"gsa-legend-chip gsa-legend-chip--x1x2\">Points x\u2081 and x\u2082<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"gsa-graph-host\" data-graph-host><\/div>\r\n        <\/div>\r\n      <\/section>\r\n    `;\r\n  }\r\n\r\n  function buildResultHTML(payload, params){\r\n    const summary = payload?.[0] || {};\r\n    const forms = Array.isArray(payload?.[1]) ? payload[1] : [];\r\n    const texts = Array.isArray(payload?.[2]) ? payload[2] : [];\r\n    const titles = Array.isArray(payload?.[3]) ? payload[3] : [];\r\n\r\n    return `\r\n      <div class=\"gsa-result__header\">\r\n        <div class=\"gsa-result__head\">\r\n          <div>\r\n            <h2 class=\"gsa-result__title\">Golden Section Method \u2014 Calculation Result<\/h2>\r\n            <div class=\"gsa-result__meta\">\r\n              Expression: <code>${escapeHtml(params.expression)}<\/code>,\r\n              interval: <code>[${escapeHtml(params.a)}, ${escapeHtml(params.b)}]<\/code>,\r\n              accuracy: <code>${escapeHtml(params.eps)}<\/code>,\r\n              maximum iterations: <code>${escapeHtml(params.maxIter)}<\/code>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          ${buildStatusBadge(summary?.status || 'eps')}\r\n        <\/div>\r\n\r\n        <div class=\"gsa-tabs\" role=\"tablist\" aria-label=\"Result view modes\">\r\n          <button class=\"gsa-tab is-active\" type=\"button\" data-tab=\"overview\">Overview<\/button>\r\n          <button class=\"gsa-tab\" type=\"button\" data-tab=\"steps\">Steps<\/button>\r\n          <button class=\"gsa-tab\" type=\"button\" data-tab=\"table\">Iterations<\/button>\r\n          <button class=\"gsa-tab\" type=\"button\" data-tab=\"graph\">Graph<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"gsa-panels\">\r\n        ${buildOverviewPanel(summary)}\r\n        ${buildStepsPanel(texts, forms, titles)}\r\n        ${buildTablePanel(summary)}\r\n        ${buildGraphPanel(summary)}\r\n      <\/div>\r\n    `;\r\n  }\r\n\r\n  function activateTabs(container){\r\n    const tabs = container.querySelectorAll('.gsa-tab');\r\n    const panels = container.querySelectorAll('.gsa-panel');\r\n\r\n    tabs.forEach(tab => {\r\n      tab.addEventListener('click', () => {\r\n        const key = tab.getAttribute('data-tab');\r\n\r\n        tabs.forEach(t => t.classList.remove('is-active'));\r\n        panels.forEach(p => p.classList.remove('is-active'));\r\n\r\n        tab.classList.add('is-active');\r\n\r\n        const panel = container.querySelector(`.gsa-panel[data-panel=\"${key}\"]`);\r\n        if (panel) panel.classList.add('is-active');\r\n\r\n        renderMath(container);\r\n      });\r\n    });\r\n  }\r\n\r\n  function formatGraphNumber(value){\r\n    const n = Number(value);\r\n\r\n    if (!Number.isFinite(n)) return '';\r\n    if (Math.abs(n - Math.round(n)) < 1e-12) return String(Math.round(n));\r\n\r\n    return n.toFixed(6).replace(\/\\.?0+$\/, '');\r\n  }\r\n\r\n  function buildIterationGraphSvg(state){\r\n    if (!state || !Array.isArray(state.points) || state.points.length < 2){\r\n      return `\r\n        <div class=\"gsa-empty\">\r\n          This view needs <code>plot_iterations<\/code> data from the server.\r\n        <\/div>\r\n      `;\r\n    }\r\n\r\n    const width = 960;\r\n    const height = 600;\r\n    const margin = { top: 24, right: 24, bottom: 54, left: 72 };\r\n\r\n    const plotW = width - margin.left - margin.right;\r\n    const plotH = height - margin.top - margin.bottom;\r\n\r\n    const xMin = Number(state.a);\r\n    const xMax = Number(state.b);\r\n    let yMin = Number(state.range?.min);\r\n    let yMax = Number(state.range?.max);\r\n\r\n    if (!Number.isFinite(xMin) || !Number.isFinite(xMax) || xMin === xMax){\r\n      return '<div class=\"gsa-empty\">The current interval has invalid bounds.<\/div>';\r\n    }\r\n\r\n    if (!Number.isFinite(yMin) || !Number.isFinite(yMax) || yMin === yMax){\r\n      yMin = -1;\r\n      yMax = 1;\r\n    }\r\n\r\n    const sx = (x) => margin.left + ((x - xMin) \/ (xMax - xMin)) * plotW;\r\n    const sy = (y) => margin.top + plotH - ((y - yMin) \/ (yMax - yMin)) * plotH;\r\n\r\n    const path = state.points.map((p, i) => {\r\n      const x = sx(Number(p.x));\r\n      const y = sy(Number(p.y));\r\n\r\n      return `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`;\r\n    }).join(' ');\r\n\r\n    const xTicks = 6;\r\n    const yTicks = 5;\r\n\r\n    let grid = '';\r\n    let labels = '';\r\n\r\n    for (let i = 0; i <= xTicks; i++) {\r\n      const value = xMin + (xMax - xMin) * i \/ xTicks;\r\n      const x = sx(value);\r\n\r\n      grid += `<line x1=\"${x}\" y1=\"${margin.top}\" x2=\"${x}\" y2=\"${margin.top + plotH}\" class=\"gsa-svg-grid\" \/>`;\r\n      labels += `<text x=\"${x}\" y=\"${height - 18}\" text-anchor=\"middle\" class=\"gsa-svg-label\">${escapeHtml(formatGraphNumber(value))}<\/text>`;\r\n    }\r\n\r\n    for (let i = 0; i <= yTicks; i++) {\r\n      const value = yMin + (yMax - yMin) * i \/ yTicks;\r\n      const y = sy(value);\r\n\r\n      grid += `<line x1=\"${margin.left}\" y1=\"${y}\" x2=\"${margin.left + plotW}\" y2=\"${y}\" class=\"gsa-svg-grid\" \/>`;\r\n      labels += `<text x=\"${margin.left - 10}\" y=\"${y + 4}\" text-anchor=\"end\" class=\"gsa-svg-label\">${escapeHtml(formatGraphNumber(value))}<\/text>`;\r\n    }\r\n\r\n    let specialMarks = '';\r\n\r\n    if (state.type === 'iteration') {\r\n      if (Number.isFinite(state.x1) && Number.isFinite(state.f1)) {\r\n        specialMarks += `\r\n          <line x1=\"${sx(state.x1)}\" y1=\"${margin.top}\" x2=\"${sx(state.x1)}\" y2=\"${margin.top + plotH}\" class=\"gsa-svg-x1x2-line\" \/>\r\n          <circle cx=\"${sx(state.x1)}\" cy=\"${sy(state.f1)}\" r=\"5.5\" class=\"gsa-svg-x1-point\" \/>\r\n          <text x=\"${sx(state.x1) + 8}\" y=\"${sy(state.f1) - 8}\" class=\"gsa-svg-annot\">x\u2081<\/text>\r\n        `;\r\n      }\r\n\r\n      if (Number.isFinite(state.x2) && Number.isFinite(state.f2)) {\r\n        specialMarks += `\r\n          <line x1=\"${sx(state.x2)}\" y1=\"${margin.top}\" x2=\"${sx(state.x2)}\" y2=\"${margin.top + plotH}\" class=\"gsa-svg-x1x2-line\" \/>\r\n          <circle cx=\"${sx(state.x2)}\" cy=\"${sy(state.f2)}\" r=\"5.5\" class=\"gsa-svg-x2-point\" \/>\r\n          <text x=\"${sx(state.x2) + 8}\" y=\"${sy(state.f2) - 8}\" class=\"gsa-svg-annot\">x\u2082<\/text>\r\n        `;\r\n      }\r\n    }\r\n\r\n    if (state.type === 'final' && Number.isFinite(state.x_min) && Number.isFinite(state.f_min)) {\r\n      specialMarks += `\r\n        <line x1=\"${sx(state.x_min)}\" y1=\"${margin.top}\" x2=\"${sx(state.x_min)}\" y2=\"${margin.top + plotH}\" class=\"gsa-svg-min-line\" \/>\r\n        <circle cx=\"${sx(state.x_min)}\" cy=\"${sy(state.f_min)}\" r=\"6.5\" class=\"gsa-svg-min-point\" \/>\r\n        <text x=\"${sx(state.x_min) + 10}\" y=\"${sy(state.f_min) - 10}\" class=\"gsa-svg-annot\">\r\n          min (${escapeHtml(formatGraphNumber(state.x_min))}, ${escapeHtml(formatGraphNumber(state.f_min))})\r\n        <\/text>\r\n      `;\r\n    }\r\n\r\n    return `\r\n      <svg class=\"gsa-plot-svg\" viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-label=\"Golden Section Method iteration graph\">\r\n        ${grid}\r\n\r\n        <line x1=\"${margin.left}\" y1=\"${margin.top + plotH}\" x2=\"${margin.left + plotW}\" y2=\"${margin.top + plotH}\" class=\"gsa-svg-axis\" \/>\r\n        <line x1=\"${margin.left}\" y1=\"${margin.top}\" x2=\"${margin.left}\" y2=\"${margin.top + plotH}\" class=\"gsa-svg-axis\" \/>\r\n\r\n        <path d=\"${path}\" class=\"gsa-svg-curve\" \/>\r\n        ${specialMarks}\r\n        ${labels}\r\n\r\n        <text x=\"${margin.left + plotW \/ 2}\" y=\"${height - 6}\" text-anchor=\"middle\" class=\"gsa-svg-axis-title\">x<\/text>\r\n        <text x=\"20\" y=\"${margin.top + plotH \/ 2}\" text-anchor=\"middle\" class=\"gsa-svg-axis-title\" transform=\"rotate(-90 20 ${margin.top + plotH \/ 2})\">f(x)<\/text>\r\n      <\/svg>\r\n    `;\r\n  }\r\n\r\n  function initIterationGraph(root, summary){\r\n    const states = Array.isArray(summary?.plot_iterations) ? summary.plot_iterations : [];\r\n    const host = root.querySelector('[data-graph-host]');\r\n    const btnPrev = root.querySelector('[data-plot-prev]');\r\n    const btnNext = root.querySelector('[data-plot-next]');\r\n    const stateLabel = root.querySelector('[data-plot-state]');\r\n    const intervalBox = root.querySelector('[data-plot-interval]');\r\n    const pointsBox = root.querySelector('[data-plot-points]');\r\n    const valuesBox = root.querySelector('[data-plot-values]');\r\n    const decisionBox = root.querySelector('[data-plot-decision]');\r\n\r\n    if (!host) return;\r\n\r\n    if (!states.length) {\r\n      host.innerHTML = `\r\n        <div class=\"gsa-empty\">\r\n          The iteration graph data is not available yet.\r\n        <\/div>\r\n      `;\r\n\r\n      if (btnPrev) btnPrev.disabled = true;\r\n      if (btnNext) btnNext.disabled = true;\r\n      if (stateLabel) stateLabel.textContent = 'No data';\r\n      if (intervalBox) intervalBox.innerHTML = '<code>\u2014<\/code>';\r\n      if (pointsBox) pointsBox.innerHTML = '<code>\u2014<\/code>';\r\n      if (valuesBox) valuesBox.innerHTML = '<code>\u2014<\/code>';\r\n      if (decisionBox) decisionBox.innerHTML = '<code>\u2014<\/code>';\r\n\r\n      return;\r\n    }\r\n\r\n    let currentIndex = 0;\r\n\r\n    function renderState(){\r\n      const state = states[currentIndex];\r\n\r\n      host.innerHTML = buildIterationGraphSvg(state);\r\n\r\n      if (state.type === 'final') {\r\n        if (stateLabel) {\r\n          stateLabel.textContent = `Final state (${currentIndex + 1} of ${states.length})`;\r\n        }\r\n\r\n        if (intervalBox) {\r\n          intervalBox.innerHTML = `<code>[${escapeHtml(formatGraphNumber(state.a))}, ${escapeHtml(formatGraphNumber(state.b))}]<\/code>`;\r\n        }\r\n\r\n        if (pointsBox) {\r\n          pointsBox.innerHTML = `<code>x_min = ${escapeHtml(formatGraphNumber(state.x_min))}<\/code>`;\r\n        }\r\n\r\n        if (valuesBox) {\r\n          valuesBox.innerHTML = `<code>f_min = ${escapeHtml(formatGraphNumber(state.f_min))}<\/code>`;\r\n        }\r\n\r\n        if (decisionBox) {\r\n          decisionBox.innerHTML = `<code>Search completed<\/code>`;\r\n        }\r\n      } else {\r\n        if (stateLabel) {\r\n          stateLabel.textContent = `Iteration ${state.k} (${currentIndex + 1} of ${states.length})`;\r\n        }\r\n\r\n        const graphX1 = Number.isFinite(state.x1) ? state.x1 : null;\r\n        const graphX2 = Number.isFinite(state.x2) ? state.x2 : null;\r\n        const graphF1 = Number.isFinite(state.f1) ? state.f1 : null;\r\n        const graphF2 = Number.isFinite(state.f2) ? state.f2 : null;\r\n\r\n        if (intervalBox) {\r\n          intervalBox.innerHTML = `<code>[${escapeHtml(formatGraphNumber(state.a))}, ${escapeHtml(formatGraphNumber(state.b))}]<\/code>`;\r\n        }\r\n\r\n        if (pointsBox) {\r\n          if (graphX1 !== null && graphX2 !== null) {\r\n            pointsBox.innerHTML = `<code>x\u2081=${escapeHtml(formatGraphNumber(graphX1))}, x\u2082=${escapeHtml(formatGraphNumber(graphX2))}<\/code>`;\r\n          } else {\r\n            pointsBox.innerHTML = `<code>not available yet<\/code>`;\r\n          }\r\n        }\r\n\r\n        if (valuesBox) {\r\n          if (graphF1 !== null && graphF2 !== null) {\r\n            valuesBox.innerHTML = `<code>f(x\u2081)=${escapeHtml(formatGraphNumber(graphF1))}, f(x\u2082)=${escapeHtml(formatGraphNumber(graphF2))}<\/code>`;\r\n          } else {\r\n            valuesBox.innerHTML = `<code>not calculated yet<\/code>`;\r\n          }\r\n        }\r\n\r\n        if (decisionBox) {\r\n          decisionBox.innerHTML = `<code>${escapeHtml(state.decision || '\u2014')}<\/code>`;\r\n        }\r\n      }\r\n\r\n      if (btnPrev) btnPrev.disabled = currentIndex === 0;\r\n      if (btnNext) btnNext.disabled = currentIndex === states.length - 1;\r\n\r\n      renderMath(root);\r\n    }\r\n\r\n    if (btnPrev) {\r\n      btnPrev.addEventListener('click', () => {\r\n        if (currentIndex > 0) {\r\n          currentIndex--;\r\n          renderState();\r\n        }\r\n      });\r\n    }\r\n\r\n    if (btnNext) {\r\n      btnNext.addEventListener('click', () => {\r\n        if (currentIndex < states.length - 1) {\r\n          currentIndex++;\r\n          renderState();\r\n        }\r\n      });\r\n    }\r\n\r\n    renderState();\r\n  }\r\n\r\n  function renderExtraPanels(root, summary){\r\n    initIterationGraph(root, summary);\r\n  }\r\n\r\n  function sendToServer(params){\r\n    const result = $(ids.result);\r\n\r\n    clearResult();\r\n    clearError();\r\n\r\n    if (activeController){\r\n      try {\r\n        activeController.abort();\r\n      } catch (_) {}\r\n    }\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\r\n    fd.append('action', 'calculate_golden_section_minimum');\r\n    fd.append('expression', params.expression);\r\n    fd.append('a', params.a);\r\n    fd.append('b', params.b);\r\n    fd.append('eps', params.eps);\r\n    fd.append('max_iter', params.maxIter);\r\n    fd.append('precision', String(SERVER_PRECISION));\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){\r\n          throw new Error('Could not get a valid response from the server.');\r\n        }\r\n\r\n        return res.json();\r\n      })\r\n      .then(data => {\r\n        setLoading(false);\r\n        setGenerateDisabled(false);\r\n\r\n        if (!data || data.success !== true){\r\n          showError((data && data.error) ? data.error : 'A server processing error occurred.');\r\n          return;\r\n        }\r\n\r\n        const payload = data.solution;\r\n\r\n        if (!payload){\r\n          showError('The server returned an empty response.');\r\n          return;\r\n        }\r\n\r\n        const summary = payload?.[0] || {};\r\n\r\n        result.innerHTML = buildResultHTML(payload, params);\r\n        result.style.display = 'grid';\r\n\r\n        activateTabs(result);\r\n        renderExtraPanels(result, summary);\r\n        renderMath(result);\r\n\r\n        result.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.');\r\n      });\r\n  }\r\n\r\n  function validateAndCalculate(){\r\n    clearError();\r\n    clearInputsError();\r\n\r\n    const expression = getExpression();\r\n    const a = getFieldValue(ids.intervalA);\r\n    const b = getFieldValue(ids.intervalB);\r\n    const eps = getFieldValue(ids.epsValue);\r\n    const maxIter = getFieldValue(ids.maxIterValue);\r\n\r\n    if (!expression){\r\n      markInputError(ids.functionLatex);\r\n      showError('Please enter a function in LaTeX format.');\r\n      return;\r\n    }\r\n\r\n    if (a === ''){\r\n      markInputError(ids.intervalA);\r\n      showError('Please enter the start of the interval a.');\r\n      return;\r\n    }\r\n\r\n    if (b === ''){\r\n      markInputError(ids.intervalB);\r\n      showError('Please enter the end of the interval b.');\r\n      return;\r\n    }\r\n\r\n    if (eps === ''){\r\n      markInputError(ids.epsValue);\r\n      showError('Please select the accuracy \u03b5.');\r\n      return;\r\n    }\r\n\r\n    if (maxIter === ''){\r\n      markInputError(ids.maxIterValue);\r\n      showError('Please select the maximum number of iterations.');\r\n      return;\r\n    }\r\n\r\n    sendToServer({ expression, a, b, eps, maxIter });\r\n  }\r\n\r\n  function clearAll(){\r\n    setExpression('');\r\n    setFieldValue(ids.intervalA, '0');\r\n    setFieldValue(ids.intervalB, '5');\r\n    setFieldValue(ids.epsValue, '0.0001');\r\n    setFieldValue(ids.maxIterValue, '50');\r\n\r\n    const select = $(ids.exampleSelect);\r\n    if (select) select.value = '';\r\n\r\n    clearInputsError();\r\n    clearError();\r\n    clearResult();\r\n    updatePreview();\r\n  }\r\n\r\n  function bindInputEvents(){\r\n    [\r\n      ids.functionLatex,\r\n      ids.intervalA,\r\n      ids.intervalB,\r\n      ids.epsValue,\r\n      ids.maxIterValue\r\n    ].forEach(id => {\r\n      const el = $(id);\r\n      if (!el) return;\r\n\r\n      el.addEventListener('input', () => {\r\n        el.classList.remove('gsa-invalid');\r\n        clearError();\r\n        clearResult();\r\n        updatePreview();\r\n      });\r\n\r\n      el.addEventListener('change', () => {\r\n        el.classList.remove('gsa-invalid');\r\n        clearError();\r\n        clearResult();\r\n        updatePreview();\r\n      });\r\n    });\r\n\r\n    const expr = $(ids.functionLatex);\r\n\r\n    if (expr){\r\n      expr.addEventListener('keydown', (e) => {\r\n        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter'){\r\n          e.preventDefault();\r\n          validateAndCalculate();\r\n        }\r\n      });\r\n    }\r\n\r\n    const toggle = $(ids.autoPreviewToggle);\r\n\r\n    if (toggle){\r\n      toggle.addEventListener('change', () => {\r\n        updateToggleLabel();\r\n        updatePreview();\r\n      });\r\n    }\r\n\r\n    const select = $(ids.exampleSelect);\r\n\r\n    if (select){\r\n      select.addEventListener('change', () => {\r\n        const option = select.options[select.selectedIndex];\r\n        const value = String(select.value || '').trim();\r\n\r\n        clearError();\r\n        clearResult();\r\n        clearInputsError();\r\n\r\n        if (!value) return;\r\n\r\n        setExpression(value);\r\n        setFieldValue(ids.intervalA, option.getAttribute('data-a') || '0');\r\n        setFieldValue(ids.intervalB, option.getAttribute('data-b') || '5');\r\n        setFieldValue(ids.epsValue, option.getAttribute('data-eps') || '0.0001');\r\n        setFieldValue(ids.maxIterValue, option.getAttribute('data-iter') || '50');\r\n\r\n        updatePreview();\r\n      });\r\n    }\r\n  }\r\n\r\n  document.addEventListener('DOMContentLoaded', () => {\r\n    updateToggleLabel();\r\n    updatePreview();\r\n    bindInputEvents();\r\n\r\n    const generateBtn = $(ids.generateBtn);\r\n    if (generateBtn) generateBtn.addEventListener('click', validateAndCalculate);\r\n\r\n    const clearBtn = $(ids.clearBtn);\r\n    if (clearBtn) clearBtn.addEventListener('click', clearAll);\r\n\r\n    renderMath($(ids.previewCard));\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-4b28b0d elementor-widget elementor-widget-html\" data-id=\"4b28b0d\" 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<section class=\"gsa-info-block\">\n  <h2 class=\"gsa-info-title\">Golden Section Method Calculator: How Does It Work?<\/h2>\n\n  <a\n    class=\"gsa-info-image-link\"\n    title=\"Golden section method\"\n    href=\"https:\/\/en.wikipedia.org\/wiki\/Golden-section_search\"\n    target=\"_blank\"\n    rel=\"nofollow noopener noreferrer\"\n  >\n    <img decoding=\"async\"\n      class=\"gsa-info-image\"\n      src=\"https:\/\/www.mathros.net.ua\/en\/wp-content\/uploads\/2026\/04\/golden-section-method-calculator1.jpg\"\n      alt=\"golden section method calculator\"\n      width=\"150\"\n      height=\"150\"\n    \/>\n  <\/a>\n\n  <p class=\"gsa-info-p\">\n    A <a title=\"Golden section method\" href=\"https:\/\/www.mathros.net.ua\/en\/golden-section-method.html\">golden section method<\/a> calculator works in a simple way: you enter a function, set the start and end of the interval, choose the accuracy, and run the calculation. The tool immediately presents the problem in a clear format, so you can check whether the function is written correctly, whether the interval is suitable, and whether you have chosen the right accuracy.\n  <\/p>\n\n  <p class=\"gsa-info-p\">\n    Next, the calculator narrows the interval step by step while searching for the minimum of the function. How does it do this? At each iteration, two inner points are placed inside the interval, the function values at these points are calculated, and then one part of the interval is discarded. As a result, you see not only the final answer but also the full reasoning process behind it.\n  <\/p>\n\n  <p class=\"gsa-info-p\">\n    In the end, you get an approximate minimum point, the function value at that point, an iteration table, and a step-by-step graph. Convenient, isn\u2019t it? This kind of calculator helps you not only find the result quickly but also better understand how the golden section method works in practice.\n  <\/p>\n<\/section>\n<style>\n.gsa-info-block {\n  width: min(860px, calc(100% - 24px));\n  margin: 26px auto 18px;\n  padding: 0;\n  font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\n}\n\n.gsa-info-title {\n  margin: 0 auto 14px;\n  max-width: 800px;\n  text-align: center;\n  color: #334155;\n  font-size: clamp(1.25rem, 1.05rem + 1.2vw, 1.75rem);\n  line-height: 1.28;\n  font-weight: 800;\n  letter-spacing: .005em;\n  text-wrap: balance;\n}\n\n.gsa-info-image-link {\n  display: block;\n  width: fit-content;\n  margin: 0 auto 16px;\n  border-radius: 12px;\n}\n\n.gsa-info-image {\n  display: block;\n  width: 150px;\n  max-width: 100%;\n  height: auto;\n}\n\n.gsa-info-p {\n  max-width: 800px;\n  margin: 10px auto;\n  color: #475569;\n  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);\n  line-height: 1.68;\n  font-weight: 500;\n  text-align: left;\n}\n\n.gsa-info-p a {\n  color: #0B638B;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n  text-decoration-thickness: 1.4px;\n}\n\n.gsa-info-p a:hover {\n  color: #084e6c;\n}\n\n.gsa-info-p a:focus-visible,\n.gsa-info-image-link:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 3px rgba(11, 99, 139, .25);\n  border-radius: 6px;\n}\n\n@media (prefers-color-scheme: dark) {\n  .gsa-info-title {\n    color: #e2e8f0;\n  }\n\n  .gsa-info-p {\n    color: #b6c3cf;\n  }\n\n  .gsa-info-p a {\n    color: #5ac2f2;\n  }\n\n  .gsa-info-p a:hover {\n    color: #82d6fa;\n  }\n}\n\n@media (max-width: 680px) {\n  .gsa-info-block {\n    width: min(100%, calc(100% - 16px));\n    margin: 20px auto 16px;\n  }\n\n  .gsa-info-image {\n    width: 135px;\n  }\n\n  .gsa-info-p {\n    line-height: 1.62;\n  }\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>Online tool Golden Section Method Enter a function in LaTeX format, set the interval and accuracy. The tool will find<\/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-3489","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/3489","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=3489"}],"version-history":[{"count":33,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/3489\/revisions"}],"predecessor-version":[{"id":3524,"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/pages\/3489\/revisions\/3524"}],"wp:attachment":[{"href":"https:\/\/www.mathros.net.ua\/en\/wp-json\/wp\/v2\/media?parent=3489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}