{"id":785,"date":"2026-04-11T07:10:06","date_gmt":"2026-04-11T07:10:06","guid":{"rendered":"https:\/\/primetoolhub.com\/?page_id=785"},"modified":"2026-07-16T04:44:34","modified_gmt":"2026-07-16T04:44:34","slug":"number-base-converter-calculator","status":"publish","type":"page","link":"https:\/\/schoolict.net\/tools\/number-base-converter-calculator\/","title":{"rendered":"Number Base Converter &amp; Calculator"},"content":{"rendered":"\n<div class=\"pth-hero-section\">\n    <div class=\"pth-hero-content\">\n        <h2>Number Systems Studio Pro<\/h2>\n        <p>Binary, hex and decimal are the easy part \u2014 most converters stop there. The harder questions are the ones that actually bite: what does a negative number look like in memory, why does 0.1 not print exactly, and what happens when a value goes one bit too far? This studio answers all three, with a bit grid you can actually see. Here is how to use each tab, with a worked example.<\/p>\n\n        <div id=\"pth-toc-placeholder\"><\/div>\n    <\/div>\n\n  \n  <div class=\"pth-hero-image\">\n\t<img data-no-lazy=\"1\"\n         src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/04\/Number-Base-Converter-Calculator-1-800x447.jpeg\"\n         width=\"800\"\n         height=\"447\"\n         alt=\"Number Systems Studio Pro\"\n         fetchpriority=\"high\"\n         loading=\"eager\"\n         decoding=\"async\"\n         style=\"width:100%; height:auto; display:block;\">\n  <\/div>\n<\/div>\n\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#\ud83d\udd34-converting-between-bases-at-any-width\">\ud83d\udd34\u00a0Converting between bases, at any width<\/a><\/li><li><a href=\"#\ud83d\udfe1-seeing-a-negative-numbers-actual-bit-pattern\">\ud83d\udfe1\u00a0Seeing a negative number&#8217;s actual bit pattern<\/a><\/li><li><a href=\"#\ud83d\udfe2-why-3-14-is-not-really-3-14-in-memory\">\ud83d\udfe2\u00a0Why 3.14 is not really 3.14 in memory<\/a><\/li><li><a href=\"#\ud83d\udfe1-bitwise-operations-and-where-this-tool-stops\">\ud83d\udfe1\u00a0Bitwise operations, and where this tool stops<\/a><\/li><\/ul><\/nav><\/div>\n\n\n<!-- LSCACHE_DISABLE -->\r\n<div id=\"pth-ns-studio-wrapper\">\r\n<style>\r\n#pth-ns-studio-wrapper{font-family:'Inter',system-ui,-apple-system,sans-serif;max-width:1160px;margin:0 auto;box-sizing:border-box;background:#f8fafc;padding:20px;border-radius:18px;color:#0f172a}\r\n#pth-ns-studio-wrapper.pth-ns-full{max-width:1700px}\r\n#pth-ns-studio-wrapper *{box-sizing:border-box;min-width:0}\r\n#pth-ns-studio-wrapper .pth-ns-top{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 22px;margin-bottom:16px;box-shadow:0 4px 10px rgba(0,0,0,.04)}\r\n#pth-ns-studio-wrapper .pth-ns-title{font-size:1.5rem;font-weight:800;color:#0f172a;margin:0;display:flex;align-items:center;gap:10px}\r\n#pth-ns-studio-wrapper .pth-ns-sub{font-size:.9rem;color:#475569;font-weight:500;margin-top:4px}\r\n#pth-ns-studio-wrapper .pth-ns-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px}\r\n#pth-ns-studio-wrapper .pth-ns-btn{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:10px 16px;font-weight:700;font-size:.88rem;cursor:pointer;transition:.2s;font-family:inherit}\r\n#pth-ns-studio-wrapper .pth-ns-btn:hover{background:#1d4ed8}\r\n#pth-ns-studio-wrapper .pth-ns-btn.pth-ns-ghost{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}\r\n#pth-ns-studio-wrapper .pth-ns-btn.pth-ns-ghost:hover{background:#e2e8f0}\r\n#pth-ns-studio-wrapper .pth-ns-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}\r\n#pth-ns-studio-wrapper .pth-ns-tab{background:#fff;border:1px solid #cbd5e1;color:#334155;font-weight:700;font-size:.88rem;padding:10px 15px;border-radius:10px;cursor:pointer;transition:.2s;font-family:inherit}\r\n#pth-ns-studio-wrapper .pth-ns-tab:hover{border-color:#2563eb;color:#2563eb}\r\n#pth-ns-studio-wrapper .pth-ns-tab.pth-ns-on{background:#2563eb;border-color:#2563eb;color:#fff}\r\n#pth-ns-studio-wrapper .pth-ns-panel{display:none}\r\n#pth-ns-studio-wrapper .pth-ns-panel.pth-ns-show{display:block}\r\n#pth-ns-studio-wrapper .pth-ns-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.02)}\r\n#pth-ns-studio-wrapper .pth-ns-h{font-size:1rem;font-weight:800;color:#1e293b;margin:0 0 13px;padding-bottom:11px;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}\r\n#pth-ns-studio-wrapper .pth-ns-h span.pth-ns-hl{display:flex;align-items:center;gap:8px}\r\n#pth-ns-studio-wrapper label{font-size:.8rem;font-weight:700;color:#334155;display:block;margin-bottom:5px}\r\n#pth-ns-studio-wrapper input[type=text],#pth-ns-studio-wrapper input[type=number],#pth-ns-studio-wrapper select{width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:8px;font-size:.92rem;font-family:ui-monospace,Menlo,Consolas,monospace;color:#0f172a;background:#fff;outline:none;transition:.2s}\r\n#pth-ns-studio-wrapper input:focus,#pth-ns-studio-wrapper select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}\r\n#pth-ns-studio-wrapper .pth-ns-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}\r\n#pth-ns-studio-wrapper .pth-ns-field{margin-bottom:12px}\r\n#pth-ns-studio-wrapper .pth-ns-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-weight:600;font-size:.86rem;padding:10px 13px;border-radius:8px;margin-top:8px}\r\n#pth-ns-studio-wrapper .pth-ns-ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;font-weight:600;font-size:.86rem;padding:10px 13px;border-radius:8px;margin-top:8px}\r\n#pth-ns-studio-wrapper .pth-ns-hint{font-size:.82rem;color:#475569;margin-top:9px;line-height:1.55}\r\n#pth-ns-studio-wrapper .pth-ns-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:.83rem;font-weight:600;padding:11px 14px;border-radius:8px;margin-top:12px;line-height:1.55}\r\n#pth-ns-studio-wrapper .pth-ns-xlink{color:#1d4ed8;font-weight:700;text-decoration:none}\r\n#pth-ns-studio-wrapper .pth-ns-xlink:hover{text-decoration:underline}\r\n#pth-ns-studio-wrapper .pth-ns-bits{display:flex;flex-wrap:wrap;gap:3px;font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:6px}\r\n#pth-ns-studio-wrapper .pth-ns-bit{width:26px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:800;font-size:.86rem;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}\r\n#pth-ns-studio-wrapper .pth-ns-bit.on{background:#2563eb;color:#fff;border-color:#2563eb}\r\n#pth-ns-studio-wrapper .pth-ns-bit.sign{background:#b91c1c;color:#fff;border-color:#b91c1c}\r\n#pth-ns-studio-wrapper .pth-ns-bit.exp{background:#ca8a04;color:#fff;border-color:#ca8a04}\r\n#pth-ns-studio-wrapper .pth-ns-bit.mant{background:#047857;color:#fff;border-color:#047857}\r\n#pth-ns-studio-wrapper .pth-ns-bitlabel{font-size:.72rem;color:#475569;font-weight:700;margin-top:4px}\r\n#pth-ns-studio-wrapper .pth-ns-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:.8rem;font-weight:700}\r\n#pth-ns-studio-wrapper .pth-ns-lg{display:flex;align-items:center;gap:6px}\r\n#pth-ns-studio-wrapper .pth-ns-sw{width:14px;height:14px;border-radius:3px;display:inline-block}\r\n#pth-ns-studio-wrapper .pth-ns-out{background:#0f172a;color:#e2e8f0;border-radius:9px;padding:12px 15px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.6;word-break:break-word}\r\n#pth-ns-studio-wrapper .pth-ns-metrics{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}\r\n#pth-ns-studio-wrapper .pth-ns-metric{flex:1;min-width:110px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:9px;padding:11px;text-align:center}\r\n#pth-ns-studio-wrapper .pth-ns-metric b{display:block;font-size:1.2rem;color:#2563eb;font-weight:800}\r\n#pth-ns-studio-wrapper .pth-ns-metric span{font-size:.7rem;color:#475569;font-weight:700;text-transform:uppercase;letter-spacing:.4px}\r\n#pth-ns-studio-wrapper table.pth-ns-tbl{width:100%;border-collapse:collapse;font-size:.85rem}\r\n#pth-ns-studio-wrapper table.pth-ns-tbl th{background:#f1f5f9;color:#1e293b;font-weight:800;text-align:left;padding:9px 11px;border-bottom:2px solid #e2e8f0;position:sticky;top:0}\r\n#pth-ns-studio-wrapper table.pth-ns-tbl td{padding:8px 11px;border-bottom:1px solid #e2e8f0;color:#334155;font-family:ui-monospace,Menlo,Consolas,monospace}\r\n#pth-ns-studio-wrapper .pth-ns-tblwrap{max-height:480px;overflow:auto;border:1px solid #e2e8f0;border-radius:10px}\r\n#pth-ns-studio-wrapper .pth-ns-seg{display:inline-flex;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:9px;padding:3px;gap:3px}\r\n#pth-ns-studio-wrapper .pth-ns-seg button{background:transparent;border:none;color:#475569;font-weight:700;font-size:.82rem;padding:7px 13px;border-radius:6px;cursor:pointer;font-family:inherit}\r\n#pth-ns-studio-wrapper .pth-ns-seg button.pth-ns-segon{background:#fff;color:#2563eb;box-shadow:0 1px 3px rgba(0,0,0,.08)}\r\n#pth-ns-studio-wrapper .pth-ns-opbtn{background:#f1f5f9;border:1px solid #cbd5e1;color:#334155;border-radius:8px;padding:9px 14px;font-weight:800;cursor:pointer;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem}\r\n#pth-ns-studio-wrapper .pth-ns-opbtn:hover{background:#e2e8f0;color:#2563eb}\r\n#pth-ns-studio-wrapper .pth-ns-opbtn.pth-ns-opon{background:#2563eb;color:#fff;border-color:#2563eb}\r\n#pth-ns-studio-wrapper .pth-ns-toast{position:fixed;bottom:22px;right:22px;background:#0f172a;color:#fff;font-weight:700;font-size:.86rem;padding:12px 20px;border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:99999;opacity:0;transform:translateY(10px);transition:.3s;pointer-events:none}\r\n#pth-ns-studio-wrapper .pth-ns-toast.pth-ns-tshow{opacity:1;transform:translateY(0)}\r\n@media(max-width:768px){#pth-ns-studio-wrapper{padding:14px}#pth-ns-studio-wrapper .pth-ns-bit{width:22px;height:26px;font-size:.76rem}}\r\n<\/style>\r\n\r\n<div class=\"pth-ns-top\">\r\n  <h2 class=\"pth-ns-title\">\ud83d\udd22 Number Systems Studio Pro<\/h2>\r\n  <div class=\"pth-ns-sub\">Convert between number bases, work with signed integers and two's complement, visualize IEEE 754 floats bit by bit, run bitwise operations, and look up encoding tables \u2014 100% offline.<\/div>\r\n  <div class=\"pth-ns-bar\">\r\n    <button class=\"pth-ns-btn pth-ns-ghost\" id=\"pth-ns-sample\">\ud83d\udca1 Load Sample<\/button>\r\n    <button class=\"pth-ns-btn pth-ns-ghost\" id=\"pth-ns-full\">\u26f6 Full Width<\/button>\r\n    <button class=\"pth-ns-btn pth-ns-ghost\" id=\"pth-ns-clear\">\ud83d\uddd1\ufe0f Clear<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"pth-ns-tabs\" role=\"tablist\">\r\n  <button class=\"pth-ns-tab pth-ns-on\" data-tab=\"conv\">\ud83d\udd22 Base Converter<\/button>\r\n  <button class=\"pth-ns-tab\" data-tab=\"twos\">\u2795 Signed &amp; Two's Complement<\/button>\r\n  <button class=\"pth-ns-tab\" data-tab=\"float\">\ud83c\udf0a IEEE 754 Float<\/button>\r\n  <button class=\"pth-ns-tab\" data-tab=\"bit\">\u2699\ufe0f Bitwise &amp; Shift<\/button>\r\n  <button class=\"pth-ns-tab\" data-tab=\"ref\">\ud83d\udd24 Encoding Reference<\/button>\r\n<\/div>\r\n\r\n<!-- TAB 1 -->\r\n<div class=\"pth-ns-panel pth-ns-show\" id=\"pth-ns-panel-conv\">\r\n  <div class=\"pth-ns-card\">\r\n    <div class=\"pth-ns-h\"><span class=\"pth-ns-hl\">\ud83d\udd22 Live Base Conversion<\/span><\/div>\r\n    <div class=\"pth-ns-grid\">\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-bin\">Binary (base 2)<\/label><input type=\"text\" id=\"pth-ns-bin\" spellcheck=\"false\"><\/div>\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-oct\">Octal (base 8)<\/label><input type=\"text\" id=\"pth-ns-oct\" spellcheck=\"false\"><\/div>\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-dec\">Decimal (base 10)<\/label><input type=\"text\" id=\"pth-ns-dec\" spellcheck=\"false\"><\/div>\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-hex\">Hexadecimal (base 16)<\/label><input type=\"text\" id=\"pth-ns-hex\" spellcheck=\"false\"><\/div>\r\n    <\/div>\r\n    <div id=\"pth-ns-convmsg\"><\/div>\r\n    <div class=\"pth-ns-grid\" style=\"margin-top:8px\">\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-custbase\">Custom base (2\u201336)<\/label><input type=\"number\" id=\"pth-ns-custbase\" min=\"2\" max=\"36\" value=\"20\"><\/div>\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-custval\">Value in that base<\/label><input type=\"text\" id=\"pth-ns-custval\" spellcheck=\"false\"><\/div>\r\n      <div class=\"pth-ns-field\"><label>Bit-width view<\/label>\r\n        <div class=\"pth-ns-seg\" id=\"pth-ns-widthseg\">\r\n          <button data-w=\"8\" class=\"pth-ns-segon\">8-bit<\/button>\r\n          <button data-w=\"16\">16-bit<\/button>\r\n          <button data-w=\"32\">32-bit<\/button>\r\n          <button data-w=\"64\">64-bit<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"pth-ns-hint\">Padded binary at the selected width: <span id=\"pth-ns-padded\" style=\"font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:#0f172a\"><\/span><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TAB 2 -->\r\n<div class=\"pth-ns-panel\" id=\"pth-ns-panel-twos\">\r\n  <div class=\"pth-ns-card\">\r\n    <div class=\"pth-ns-h\"><span class=\"pth-ns-hl\">\u2795 Decimal \u21c4 Two's Complement<\/span><\/div>\r\n    <div class=\"pth-ns-grid\">\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-twdec\">Signed decimal<\/label><input type=\"text\" id=\"pth-ns-twdec\" value=\"-5\"><\/div>\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-twbits\">Bit width<\/label>\r\n        <div class=\"pth-ns-seg\" id=\"pth-ns-twwidthseg\">\r\n          <button data-w=\"4\">4-bit<\/button>\r\n          <button data-w=\"8\" class=\"pth-ns-segon\">8-bit<\/button>\r\n          <button data-w=\"16\">16-bit<\/button>\r\n          <button data-w=\"32\">32-bit<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"pth-ns-bits\" id=\"pth-ns-twbitsgrid\"><\/div>\r\n    <div class=\"pth-ns-legend\">\r\n      <span class=\"pth-ns-lg\"><span class=\"pth-ns-sw\" style=\"background:#b91c1c\"><\/span>Sign bit<\/span>\r\n      <span class=\"pth-ns-lg\"><span class=\"pth-ns-sw\" style=\"background:#2563eb\"><\/span>Value bits<\/span>\r\n    <\/div>\r\n    <div id=\"pth-ns-twout\" style=\"margin-top:12px\"><\/div>\r\n  <\/div>\r\n  <div class=\"pth-ns-card\">\r\n    <div class=\"pth-ns-h\"><span class=\"pth-ns-hl\">\ud83d\udcd0 Sign-Magnitude vs Two's Complement<\/span><\/div>\r\n    <div id=\"pth-ns-twcompare\"><\/div>\r\n    <div class=\"pth-ns-hint\">Sign-magnitude flips only the top bit to show a negative sign, which is simple to read but breaks ordinary addition \u2014 it produces two zeros (+0 and \u22120) and needs special-case logic. Two's complement invert-and-add-one so that regular binary addition works unmodified, which is why every modern processor uses it.<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TAB 3 -->\r\n<div class=\"pth-ns-panel\" id=\"pth-ns-panel-float\">\r\n  <div class=\"pth-ns-card\">\r\n    <div class=\"pth-ns-h\"><span class=\"pth-ns-hl\">\ud83c\udf0a IEEE 754 Bit Breakdown<\/span><\/div>\r\n    <div class=\"pth-ns-grid\">\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-fval\">Decimal value<\/label><input type=\"text\" id=\"pth-ns-fval\" value=\"3.14\"><\/div>\r\n      <div class=\"pth-ns-field\"><label>Precision<\/label>\r\n        <div class=\"pth-ns-seg\" id=\"pth-ns-precseg\">\r\n          <button data-p=\"32\" class=\"pth-ns-segon\">Single (32-bit)<\/button>\r\n          <button data-p=\"64\">Double (64-bit)<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"pth-ns-bits\" id=\"pth-ns-fbits\" style=\"margin-top:10px\"><\/div>\r\n    <div class=\"pth-ns-legend\">\r\n      <span class=\"pth-ns-lg\"><span class=\"pth-ns-sw\" style=\"background:#b91c1c\"><\/span>Sign (1 bit)<\/span>\r\n      <span class=\"pth-ns-lg\"><span class=\"pth-ns-sw\" style=\"background:#ca8a04\"><\/span>Exponent<\/span>\r\n      <span class=\"pth-ns-lg\"><span class=\"pth-ns-sw\" style=\"background:#047857\"><\/span>Mantissa<\/span>\r\n    <\/div>\r\n    <div class=\"pth-ns-metrics\" id=\"pth-ns-fmetrics\"><\/div>\r\n    <div id=\"pth-ns-fnote\"><\/div>\r\n  <\/div>\r\n  <div class=\"pth-ns-card\">\r\n    <div class=\"pth-ns-h\"><span class=\"pth-ns-hl\">\ud83d\udd01 Raw Bits \u21c4 Decimal<\/span><\/div>\r\n    <label for=\"pth-ns-fbitsin\">Paste the raw bit pattern (32 or 64 bits)<\/label>\r\n    <input type=\"text\" id=\"pth-ns-fbitsin\" spellcheck=\"false\" placeholder=\"01000000010010001111010111000011\">\r\n    <div class=\"pth-ns-bar\"><button class=\"pth-ns-btn\" id=\"pth-ns-fdecode\">Decode to decimal<\/button><\/div>\r\n    <div id=\"pth-ns-fbitsout\" style=\"margin-top:10px\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TAB 4 -->\r\n<div class=\"pth-ns-panel\" id=\"pth-ns-panel-bit\">\r\n  <div class=\"pth-ns-card\">\r\n    <div class=\"pth-ns-h\"><span class=\"pth-ns-hl\">\u2699\ufe0f Bitwise Operation Visualizer<\/span><\/div>\r\n    <div class=\"pth-ns-grid\">\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-opa\">Value A (decimal)<\/label><input type=\"text\" id=\"pth-ns-opa\" value=\"12\"><\/div>\r\n      <div class=\"pth-ns-field\"><label for=\"pth-ns-opb\">Value B (decimal)<\/label><input type=\"text\" id=\"pth-ns-opb\" value=\"10\"><\/div>\r\n      <div class=\"pth-ns-field\"><label>Bit width<\/label>\r\n        <div class=\"pth-ns-seg\" id=\"pth-ns-bitwidthseg\">\r\n          <button data-w=\"8\" class=\"pth-ns-segon\">8-bit<\/button>\r\n          <button data-w=\"16\">16-bit<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"pth-ns-bar\">\r\n      <button class=\"pth-ns-opbtn pth-ns-opon\" data-op=\"and\">AND<\/button>\r\n      <button class=\"pth-ns-opbtn\" data-op=\"or\">OR<\/button>\r\n      <button class=\"pth-ns-opbtn\" data-op=\"xor\">XOR<\/button>\r\n      <button class=\"pth-ns-opbtn\" data-op=\"not\">NOT A<\/button>\r\n      <button class=\"pth-ns-opbtn\" data-op=\"shl\">A &lt;&lt; 1<\/button>\r\n      <button class=\"pth-ns-opbtn\" data-op=\"shr\">A &gt;&gt; 1<\/button>\r\n    <\/div>\r\n    <div id=\"pth-ns-bitgrid\" style=\"margin-top:12px\"><\/div>\r\n    <div class=\"pth-ns-out\" id=\"pth-ns-bitresult\" style=\"margin-top:10px\"><\/div>\r\n    <div class=\"pth-ns-hint\" id=\"pth-ns-bituse\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- TAB 5 -->\r\n<div class=\"pth-ns-panel\" id=\"pth-ns-panel-ref\">\r\n  <div class=\"pth-ns-card\">\r\n    <div class=\"pth-ns-h\"><span class=\"pth-ns-hl\">\ud83d\udd24 Encoding Reference<\/span><\/div>\r\n    <div class=\"pth-ns-grid\">\r\n      <div style=\"flex:2\"><input type=\"text\" id=\"pth-ns-refsearch\" placeholder=\"Search a character or code...\"><\/div>\r\n      <div><select id=\"pth-ns-refcat\">\r\n        <option value=\"all\">All<\/option>\r\n        <option value=\"ASCII\">ASCII<\/option>\r\n        <option value=\"BCD\">BCD<\/option>\r\n        <option value=\"Gray\">Gray code<\/option>\r\n        <option value=\"Excess3\">Excess-3<\/option>\r\n      <\/select><\/div>\r\n    <\/div>\r\n    <div class=\"pth-ns-tblwrap\" style=\"margin-top:14px\">\r\n      <table class=\"pth-ns-tbl\">\r\n        <thead><tr><th>Value<\/th><th>Category<\/th><th>Binary<\/th><th>Notes<\/th><\/tr><\/thead>\r\n        <tbody id=\"pth-ns-refbody\"><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"pth-ns-toast\" id=\"pth-ns-toast\"><\/div>\r\n<\/div>\r\n\r\n<script data-no-optimize=\"1\" data-no-minify=\"1\" data-cfasync=\"false\">\r\nwindow.pthNumberStudioApp = (function () {\r\n    'use strict';\r\n    var root = null;\r\n    var convWidth = 8, twWidth = 8, bitWidth = 8, floatPrec = 32, bitOp = 'and';\r\n\r\n    function byId(id) { return document.getElementById(id); }\r\n    function el(t, c, x) { var e = document.createElement(t); if (c) { e.className = c; } if (x !== undefined) { e.textContent = x; } return e; }\r\n    function trim(s) { return (s || '').replace(\/^\\s+|\\s+$\/g, ''); }\r\n    function toast(m) {\r\n        var t = byId('pth-ns-toast'); if (!t) { return; }\r\n        t.textContent = m; t.className = 'pth-ns-toast pth-ns-tshow';\r\n        window.setTimeout(function () { t.className = 'pth-ns-toast'; }, 2000);\r\n    }\r\n    function pad(s, n) { while (s.length < n) { s = '0' + s; } return s; }\r\n\r\n    \/* ---------- BASE MATH ---------- *\/\r\n    function toBaseStr(n, base) {\r\n        if (n === 0) { return '0'; }\r\n        var neg = n < 0; n = Math.abs(n);\r\n        var digits = '0123456789abcdefghijklmnopqrstuvwxyz', out = '';\r\n        while (n > 0) { out = digits.charAt(n % base) + out; n = Math.floor(n \/ base); }\r\n        return (neg ? '-' : '') + out;\r\n    }\r\n    function fromBaseStr(s, base) {\r\n        s = trim(s).toLowerCase();\r\n        if (!s) { return NaN; }\r\n        var neg = s.charAt(0) === '-'; if (neg) { s = s.slice(1); }\r\n        var digits = '0123456789abcdefghijklmnopqrstuvwxyz', n = 0, i;\r\n        if (!s.length) { return NaN; }\r\n        for (i = 0; i < s.length; i++) {\r\n            var d = digits.indexOf(s.charAt(i));\r\n            if (d < 0 || d >= base) { return NaN; }\r\n            n = n * base + d;\r\n        }\r\n        return neg ? -n : n;\r\n    }\r\n\r\n    \/* ---------- TAB 1: CONVERTER ---------- *\/\r\n    function convMsg(html, cls) {\r\n        var box = byId('pth-ns-convmsg');\r\n        box.innerHTML = '';\r\n        if (html) { box.appendChild(el('div', cls, html)); }\r\n    }\r\n    function syncFrom(value) {\r\n        if (isNaN(value)) { convMsg('Enter a valid number in one of the fields.', 'pth-ns-err'); return; }\r\n        byId('pth-ns-bin').value = toBaseStr(value, 2);\r\n        byId('pth-ns-oct').value = toBaseStr(value, 8);\r\n        byId('pth-ns-dec').value = String(value);\r\n        byId('pth-ns-hex').value = toBaseStr(value, 16);\r\n        convMsg('', '');\r\n        var padded = value < 0 ? twosComplementBits(value, convWidth) : pad(toBaseStr(value, 2), convWidth);\r\n        byId('pth-ns-padded').textContent = padded + ' (' + convWidth + '-bit)';\r\n        renderCustomFromDecimal(value);\r\n    }\r\n    function renderCustomFromDecimal(value) {\r\n        var base = parseInt(byId('pth-ns-custbase').value, 10) || 20;\r\n        if (document.activeElement !== byId('pth-ns-custval')) {\r\n            byId('pth-ns-custval').value = toBaseStr(value, base);\r\n        }\r\n    }\r\n    function initConverter() {\r\n        byId('pth-ns-bin').addEventListener('input', function () { syncFrom(fromBaseStr(this.value, 2)); });\r\n        byId('pth-ns-oct').addEventListener('input', function () { syncFrom(fromBaseStr(this.value, 8)); });\r\n        byId('pth-ns-dec').addEventListener('input', function () { syncFrom(fromBaseStr(this.value, 10)); });\r\n        byId('pth-ns-hex').addEventListener('input', function () { syncFrom(fromBaseStr(this.value, 16)); });\r\n        byId('pth-ns-custbase').addEventListener('input', function () {\r\n            var dec = fromBaseStr(byId('pth-ns-dec').value, 10);\r\n            if (!isNaN(dec)) { renderCustomFromDecimal(dec); }\r\n        });\r\n        byId('pth-ns-custval').addEventListener('input', function () {\r\n            var base = parseInt(byId('pth-ns-custbase').value, 10) || 20;\r\n            var v = fromBaseStr(this.value, base);\r\n            if (!isNaN(v)) { syncFrom(v); }\r\n        });\r\n        seg('pth-ns-widthseg', 'data-w', function (v) { convWidth = parseInt(v, 10); syncFrom(fromBaseStr(byId('pth-ns-dec').value, 10)); });\r\n    }\r\n\r\n    \/* ---------- TAB 2: TWO'S COMPLEMENT ---------- *\/\r\n    function twosComplementBits(n, bits) {\r\n        var max = Math.pow(2, bits);\r\n        var v = ((n % max) + max) % max;\r\n        return pad(v.toString(2), bits);\r\n    }\r\n    function twosComplementToSigned(bitstr) {\r\n        var bits = bitstr.length, v = parseInt(bitstr, 2), max = Math.pow(2, bits);\r\n        if (v >= max \/ 2) { v -= max; }\r\n        return v;\r\n    }\r\n    function rangeCheck(n, bits, signed) {\r\n        if (signed) {\r\n            var lo = -Math.pow(2, bits - 1), hi = Math.pow(2, bits - 1) - 1;\r\n            return { ok: n >= lo && n <= hi, lo: lo, hi: hi };\r\n        }\r\n        var hi2 = Math.pow(2, bits) - 1;\r\n        return { ok: n >= 0 && n <= hi2, lo: 0, hi: hi2 };\r\n    }\r\n    function renderTwos() {\r\n        var n = fromBaseStr(byId('pth-ns-twdec').value, 10);\r\n        var box = byId('pth-ns-twbitsgrid'), out = byId('pth-ns-twout'), cmp = byId('pth-ns-twcompare');\r\n        box.innerHTML = ''; out.innerHTML = ''; cmp.innerHTML = '';\r\n        if (isNaN(n)) { out.appendChild(el('div', 'pth-ns-err', 'Enter a valid decimal integer.')); return; }\r\n        var rc = rangeCheck(n, twWidth, true);\r\n        if (!rc.ok) {\r\n            out.appendChild(el('div', 'pth-ns-err', 'Out of range for ' + twWidth + '-bit signed: valid range is ' + rc.lo + ' to ' + rc.hi + '. Showing the wrapped result.'));\r\n        }\r\n        var bits = twosComplementBits(n, twWidth);\r\n        var i;\r\n        for (i = 0; i < bits.length; i++) {\r\n            var b = el('span', 'pth-ns-bit' + (i === 0 ? ' sign' : (bits.charAt(i) === '1' ? ' on' : '')), bits.charAt(i));\r\n            box.appendChild(b);\r\n        }\r\n        out.appendChild(el('div', 'pth-ns-ok', 'Two\\u2019s complement (' + twWidth + '-bit): ' + bits + '  =  0x' + toBaseStr(parseInt(bits, 2), 16).toUpperCase()));\r\n\r\n        var magBits = bits.charAt(0) === '1' ? pad(Math.abs(n).toString(2), twWidth - 1) : pad(n.toString(2), twWidth - 1);\r\n        var smStr = (bits.charAt(0)) + magBits;\r\n        var t = el('table', 'pth-ns-tbl');\r\n        var thead = el('thead'); var htr = el('tr');\r\n        ['Representation', 'Bit pattern', 'Notes'].forEach(function (h) { htr.appendChild(el('th', null, h)); });\r\n        thead.appendChild(htr); t.appendChild(thead);\r\n        var tb = el('tbody');\r\n        var r1 = el('tr'); r1.appendChild(el('td', null, 'Two\\u2019s complement')); r1.appendChild(el('td', null, bits)); r1.appendChild(el('td', null, 'What real hardware uses'));\r\n        var r2 = el('tr'); r2.appendChild(el('td', null, 'Sign-magnitude')); r2.appendChild(el('td', null, smStr)); r2.appendChild(el('td', null, 'Simple to read, awkward to add'));\r\n        tb.appendChild(r1); tb.appendChild(r2); t.appendChild(tb);\r\n        cmp.appendChild(t);\r\n    }\r\n\r\n    \/* ---------- TAB 3: IEEE 754 ---------- *\/\r\n    function floatToIEEE754(val, prec) {\r\n        var double = prec === 64;\r\n        var buf = new ArrayBuffer(double ? 8 : 4);\r\n        var view = new DataView(buf);\r\n        if (double) { view.setFloat64(0, val); } else { view.setFloat32(0, val); }\r\n        var bytes = [], i;\r\n        for (i = 0; i < buf.byteLength; i++) { bytes.push(view.getUint8(i)); }\r\n        var bits = bytes.map(function (b) { return pad(b.toString(2), 8); }).join('');\r\n        var expBits = double ? 11 : 8, mantBits = double ? 52 : 23;\r\n        return { sign: bits.charAt(0), exponent: bits.substr(1, expBits), mantissa: bits.substr(1 + expBits, mantBits), raw: bits, expBits: expBits, mantBits: mantBits };\r\n    }\r\n    function ieee754ToFloat(bits, prec) {\r\n        var double = prec === 64;\r\n        var bytes = [], i;\r\n        for (i = 0; i < bits.length; i += 8) { bytes.push(parseInt(bits.substr(i, 8), 2)); }\r\n        var buf = new ArrayBuffer(bytes.length), view = new DataView(buf);\r\n        for (i = 0; i < bytes.length; i++) { view.setUint8(i, bytes[i]); }\r\n        return double ? view.getFloat64(0) : view.getFloat32(0);\r\n    }\r\n    function renderFloat() {\r\n        var v = parseFloat(byId('pth-ns-fval').value);\r\n        var box = byId('pth-ns-fbits'), met = byId('pth-ns-fmetrics'), note = byId('pth-ns-fnote');\r\n        box.innerHTML = ''; met.innerHTML = ''; note.innerHTML = '';\r\n        if (isNaN(v)) { note.appendChild(el('div', 'pth-ns-err', 'Enter a valid decimal number.')); return; }\r\n        var f = floatToIEEE754(v, floatPrec);\r\n        var i;\r\n        var sb = el('span', 'pth-ns-bit sign', f.sign); box.appendChild(sb);\r\n        for (i = 0; i < f.exponent.length; i++) { box.appendChild(el('span', 'pth-ns-bit exp', f.exponent.charAt(i))); }\r\n        for (i = 0; i < f.mantissa.length; i++) { box.appendChild(el('span', 'pth-ns-bit mant', f.mantissa.charAt(i))); }\r\n        function metric(v2, l) { var m = el('div', 'pth-ns-metric'); m.appendChild(el('b', null, String(v2))); m.appendChild(el('span', null, l)); return m; }\r\n        met.appendChild(metric(f.sign === '1' ? 'Negative' : 'Positive', 'Sign'));\r\n        met.appendChild(metric(parseInt(f.exponent, 2), 'Raw exponent'));\r\n        met.appendChild(metric(f.exponent.length + ' bits', 'Exponent width'));\r\n        met.appendChild(metric(f.mantissa.length + ' bits', 'Mantissa width'));\r\n        var back = ieee754ToFloat(f.raw, floatPrec);\r\n        var exact = back === v;\r\n        note.appendChild(el('div', exact ? 'pth-ns-ok' : 'pth-ns-note',\r\n            'Decoded back to ' + back + (exact ? ' \u2014 exact round trip.' : '. The stored value is the closest representable float, which is why some decimals like 0.1 never come back exactly.')));\r\n        var allOnesExp = \/^1+$\/.test(f.exponent);\r\n        var allZeroExp = \/^0+$\/.test(f.exponent);\r\n        if (allOnesExp) {\r\n            var isZeroMant = \/^0+$\/.test(f.mantissa);\r\n            note.appendChild(el('div', 'pth-ns-note', isZeroMant ? 'All-ones exponent with a zero mantissa: this bit pattern means Infinity.' : 'All-ones exponent with a non-zero mantissa: this bit pattern means NaN (not a number).'));\r\n        } else if (allZeroExp) {\r\n            var isZeroMant2 = \/^0+$\/.test(f.mantissa);\r\n            note.appendChild(el('div', 'pth-ns-note', isZeroMant2 ? 'All-zero exponent and mantissa: this is signed zero.' : 'All-zero exponent with a non-zero mantissa: this is a denormal number, used for values too small for the normal range.'));\r\n        }\r\n    }\r\n    function decodeRawBits() {\r\n        var bits = byId('pth-ns-fbitsin').value.replace(\/[^01]\/g, '');\r\n        var box = byId('pth-ns-fbitsout');\r\n        box.innerHTML = '';\r\n        if (bits.length !== 32 && bits.length !== 64) {\r\n            box.appendChild(el('div', 'pth-ns-err', 'Paste exactly 32 bits (single) or 64 bits (double). Got ' + bits.length + '.'));\r\n            return;\r\n        }\r\n        var prec = bits.length === 64 ? 64 : 32;\r\n        var val = ieee754ToFloat(bits, prec);\r\n        box.appendChild(el('div', 'pth-ns-ok', 'Decoded value: ' + val + '  (' + prec + '-bit)'));\r\n    }\r\n\r\n    \/* ---------- TAB 4: BITWISE ---------- *\/\r\n    function renderBitwise() {\r\n        var a = parseInt(byId('pth-ns-opa').value, 10);\r\n        var b = parseInt(byId('pth-ns-opb').value, 10);\r\n        var box = byId('pth-ns-bitgrid'), out = byId('pth-ns-bitresult'), use = byId('pth-ns-bituse');\r\n        box.innerHTML = ''; out.textContent = ''; use.textContent = '';\r\n        if (isNaN(a) || (bitOp !== 'not' && bitOp !== 'shl' && bitOp !== 'shr' && isNaN(b))) {\r\n            out.textContent = 'Enter valid whole numbers.'; return;\r\n        }\r\n        var max = Math.pow(2, bitWidth);\r\n        var ua = ((a % max) + max) % max;\r\n        var ub = isNaN(b) ? 0 : ((b % max) + max) % max;\r\n        var res, opLabel;\r\n        if (bitOp === 'and') { res = ua & ub; opLabel = 'A AND B'; }\r\n        else if (bitOp === 'or') { res = ua | ub; opLabel = 'A OR B'; }\r\n        else if (bitOp === 'xor') { res = ua ^ ub; opLabel = 'A XOR B'; }\r\n        else if (bitOp === 'not') { res = (~ua) & (max - 1); opLabel = 'NOT A'; }\r\n        else if (bitOp === 'shl') { res = (ua << 1) & (max - 1); opLabel = 'A << 1'; }\r\n        else { res = ua >>> 1; opLabel = 'A >> 1'; }\r\n\r\n        var abits = pad(ua.toString(2), bitWidth);\r\n        var bbits = pad(ub.toString(2), bitWidth);\r\n        var rbits = pad(res.toString(2), bitWidth);\r\n        function row(label, bits, cmpBits) {\r\n            var wrap = el('div');\r\n            wrap.appendChild(el('div', 'pth-ns-bitlabel', label));\r\n            var line = el('div', 'pth-ns-bits');\r\n            var i;\r\n            for (i = 0; i < bits.length; i++) {\r\n                var cls = 'pth-ns-bit' + (bits.charAt(i) === '1' ? ' on' : '');\r\n                line.appendChild(el('span', cls, bits.charAt(i)));\r\n            }\r\n            wrap.appendChild(line);\r\n            return wrap;\r\n        }\r\n        box.appendChild(row('A = ' + ua, abits));\r\n        if (bitOp !== 'not' && bitOp !== 'shl' && bitOp !== 'shr') { box.appendChild(row('B = ' + ub, bbits)); }\r\n        box.appendChild(row(opLabel + ' = ' + res, rbits));\r\n        out.textContent = opLabel + ' = ' + res + '  (binary ' + rbits + ', hex 0x' + res.toString(16).toUpperCase() + ')';\r\n\r\n        var notes = {\r\n            and: 'AND with a mask of 1s and 0s is how flags are read \u2014 AND with 00000001 isolates just the last bit.',\r\n            or: 'OR is how individual flag bits get turned on without disturbing the others.',\r\n            xor: 'XOR flips only the bits set in the second operand, which is why it is used to toggle flags and in simple checksums.',\r\n            not: 'NOT flips every bit, producing the bitwise complement used when building an inverse mask.',\r\n            shl: 'Shifting left by one bit doubles the value (until it overflows the bit width) and is how bit flags are positioned.',\r\n            shr: 'Shifting right by one bit halves the value (integer division), commonly used to read one flag at a time.'\r\n        };\r\n        use.textContent = notes[bitOp] || '';\r\n    }\r\n\r\n    \/* ---------- TAB 5: REFERENCE ---------- *\/\r\n    function asciiRows() {\r\n        var rows = [], list = [\r\n            [32, 'Space'], [48, '0'], [57, '9'], [65, 'A'], [90, 'Z'], [97, 'a'], [122, 'z'], [10, 'Line feed'], [13, 'Carriage return'], [9, 'Tab']\r\n        ], i;\r\n        for (i = 0; i < list.length; i++) {\r\n            rows.push({ v: list[i][1], c: 'ASCII', bin: pad(list[i][0].toString(2), 8), note: 'Decimal ' + list[i][0] + ', hex 0x' + list[i][0].toString(16).toUpperCase() });\r\n        }\r\n        return rows;\r\n    }\r\n    function bcdRows() {\r\n        var rows = [], i;\r\n        for (i = 0; i <= 9; i++) { rows.push({ v: String(i), c: 'BCD', bin: pad(i.toString(2), 4), note: 'One decimal digit per 4 bits' }); }\r\n        return rows;\r\n    }\r\n    function grayRows() {\r\n        var rows = [], i;\r\n        for (i = 0; i <= 7; i++) {\r\n            var gray = i ^ (i >> 1);\r\n            rows.push({ v: String(i), c: 'Gray', bin: pad(gray.toString(2), 3), note: 'Only one bit changes between consecutive values' });\r\n        }\r\n        return rows;\r\n    }\r\n    function excess3Rows() {\r\n        var rows = [], i;\r\n        for (i = 0; i <= 9; i++) { rows.push({ v: String(i), c: 'Excess3', bin: pad((i + 3).toString(2), 4), note: 'Decimal digit plus 3, useful for BCD arithmetic' }); }\r\n        return rows;\r\n    }\r\n    function refRows() { return asciiRows().concat(bcdRows(), grayRows(), excess3Rows()); }\r\n    function renderRef() {\r\n        var body = byId('pth-ns-refbody');\r\n        var q = (byId('pth-ns-refsearch').value || '').toLowerCase();\r\n        var cat = byId('pth-ns-refcat').value;\r\n        body.innerHTML = '';\r\n        var rows = refRows(), i, shown = 0;\r\n        for (i = 0; i < rows.length; i++) {\r\n            var r = rows[i];\r\n            if (cat !== 'all' && r.c !== cat) { continue; }\r\n            if (q && r.v.toLowerCase().indexOf(q) === -1 && r.note.toLowerCase().indexOf(q) === -1) { continue; }\r\n            var tr = el('tr');\r\n            tr.appendChild(el('td', null, r.v));\r\n            tr.appendChild(el('td', null, r.c));\r\n            tr.appendChild(el('td', null, r.bin));\r\n            tr.appendChild(el('td', null, r.note));\r\n            body.appendChild(tr); shown++;\r\n        }\r\n        if (!shown) {\r\n            var tr2 = el('tr');\r\n            var td = el('td', null, 'Nothing matches.');\r\n            td.setAttribute('colspan', '4'); td.style.textAlign = 'center'; td.style.color = '#475569';\r\n            tr2.appendChild(td); body.appendChild(tr2);\r\n        }\r\n    }\r\n\r\n    \/* ---------- SHARED ---------- *\/\r\n    function seg(id, attr, cb) {\r\n        var box = byId(id);\r\n        if (!box) { return; }\r\n        var btns = box.querySelectorAll('button'), i;\r\n        for (i = 0; i < btns.length; i++) {\r\n            btns[i].addEventListener('click', function () {\r\n                var b = box.querySelectorAll('button'), j;\r\n                for (j = 0; j < b.length; j++) { b[j].className = ''; }\r\n                this.className = 'pth-ns-segon';\r\n                cb(this.getAttribute(attr));\r\n            });\r\n        }\r\n    }\r\n    function switchTab(name) {\r\n        var tabs = root.querySelectorAll('.pth-ns-tab'), i;\r\n        for (i = 0; i < tabs.length; i++) {\r\n            tabs[i].className = (tabs[i].getAttribute('data-tab') === name) ? 'pth-ns-tab pth-ns-on' : 'pth-ns-tab';\r\n        }\r\n        var pans = root.querySelectorAll('.pth-ns-panel');\r\n        for (i = 0; i < pans.length; i++) { pans[i].className = 'pth-ns-panel'; }\r\n        var p = byId('pth-ns-panel-' + name);\r\n        if (p) { p.className = 'pth-ns-panel pth-ns-show'; }\r\n    }\r\n\r\n    function loadSample() {\r\n        byId('pth-ns-dec').value = '2026';\r\n        syncFrom(2026);\r\n        byId('pth-ns-twdec').value = '-42';\r\n        renderTwos();\r\n        byId('pth-ns-fval').value = '3.14159';\r\n        renderFloat();\r\n        byId('pth-ns-opa').value = '12'; byId('pth-ns-opb').value = '10';\r\n        renderBitwise();\r\n    }\r\n\r\n    function init() {\r\n        root = document.getElementById('pth-ns-studio-wrapper');\r\n        if (!root || root.getAttribute('data-pth-init') === '1') { return; }\r\n        root.setAttribute('data-pth-init', '1');\r\n\r\n        var tabs = root.querySelectorAll('.pth-ns-tab'), i;\r\n        for (i = 0; i < tabs.length; i++) {\r\n            tabs[i].addEventListener('click', function () { switchTab(this.getAttribute('data-tab')); });\r\n        }\r\n\r\n        initConverter();\r\n        syncFrom(255);\r\n\r\n        byId('pth-ns-twdec').addEventListener('input', renderTwos);\r\n        seg('pth-ns-twwidthseg', 'data-w', function (v) { twWidth = parseInt(v, 10); renderTwos(); });\r\n        renderTwos();\r\n\r\n        byId('pth-ns-fval').addEventListener('input', renderFloat);\r\n        seg('pth-ns-precseg', 'data-p', function (v) { floatPrec = parseInt(v, 10); renderFloat(); });\r\n        byId('pth-ns-fdecode').addEventListener('click', decodeRawBits);\r\n        renderFloat();\r\n\r\n        byId('pth-ns-opa').addEventListener('input', renderBitwise);\r\n        byId('pth-ns-opb').addEventListener('input', renderBitwise);\r\n        seg('pth-ns-bitwidthseg', 'data-w', function (v) { bitWidth = parseInt(v, 10); renderBitwise(); });\r\n        var opbtns = root.querySelectorAll('.pth-ns-opbtn'), k;\r\n        for (k = 0; k < opbtns.length; k++) {\r\n            opbtns[k].addEventListener('click', function () {\r\n                var all = root.querySelectorAll('.pth-ns-opbtn'), j;\r\n                for (j = 0; j < all.length; j++) { all[j].className = 'pth-ns-opbtn'; }\r\n                this.className = 'pth-ns-opbtn pth-ns-opon';\r\n                bitOp = this.getAttribute('data-op');\r\n                renderBitwise();\r\n            });\r\n        }\r\n        renderBitwise();\r\n\r\n        byId('pth-ns-refsearch').addEventListener('input', renderRef);\r\n        byId('pth-ns-refcat').addEventListener('change', renderRef);\r\n        renderRef();\r\n\r\n        byId('pth-ns-sample').addEventListener('click', function () { loadSample(); toast('Sample loaded'); });\r\n        byId('pth-ns-full').addEventListener('click', function () {\r\n            if (root.className.indexOf('pth-ns-full') !== -1) { root.className = root.className.replace(' pth-ns-full', '').replace('pth-ns-full', ''); }\r\n            else { root.className = root.className + ' pth-ns-full'; }\r\n        });\r\n        byId('pth-ns-clear').addEventListener('click', function () {\r\n            byId('pth-ns-bin').value = ''; byId('pth-ns-oct').value = ''; byId('pth-ns-dec').value = ''; byId('pth-ns-hex').value = '';\r\n            convMsg('', ''); byId('pth-ns-padded').textContent = '';\r\n            toast('Cleared');\r\n        });\r\n    }\r\n    return { init: init };\r\n})();\r\n\r\n\/* 4-layer bootstrap (LiteSpeed-safe) *\/\r\n(function () {\r\n    function boot() { if (window.pthNumberStudioApp && document.getElementById('pth-ns-studio-wrapper')) { window.pthNumberStudioApp.init(); } }\r\n    if (document.readyState === 'complete' || document.readyState === 'interactive') { window.setTimeout(boot, 1); }\r\n    document.addEventListener('DOMContentLoaded', boot);\r\n    window.addEventListener('load', boot);\r\n    window.setTimeout(boot, 900);\r\n})();\r\n<\/script>\n\n\n\n<style>\n.pth-feature-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; }\n.pth-feat-box { border: 1px solid #e2e8f0; background: #ffffff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); transition: all 0.3s ease; }\n.pth-feat-box:hover { border-color: #bfdbfe; transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); }\n.pth-feat-title { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }\n.pth-feat-text { font-size: 0.9rem; color: #475569; line-height: 1.6; margin: 0; }\n.pth-steps-wrap { border: 1px solid #e2e8f0; background: #ffffff; padding: 40px 30px; border-radius: 16px; text-align: center; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02); margin-bottom: 40px; }\n.pth-steps-title { font-size: 1.2rem; font-weight: 800; color: #1e293b; text-transform: uppercase; margin-bottom: 35px; letter-spacing: 1px; }\n.pth-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; }\n.pth-step-item { display: flex; flex-direction: column; align-items: center; }\n.pth-step-num { width: 45px; height: 45px; background: #3b82f6; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; margin-bottom: 15px; box-shadow: 0 4px 10px rgba(59,130,246,0.3); }\n.pth-step-name { font-weight: 800; color: #0f172a; margin-bottom: 8px; font-size: 1.05rem; }\n.pth-step-desc { font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0; }\n<\/style>\n<div class=\"pth-feature-wrap\">\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83e\udde0 Algorithmic Execution<\/div>\n        <p class=\"pth-feat-text\">The <strong>Number Base Converter<\/strong> processes mathematical radices instantly, calculating binary, octal, and hexadecimal values directly inside your Central Processing Unit.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\ud83d\udee1\ufe0f Cryptographic Privacy<\/div>\n        <p class=\"pth-feat-text\">By confining all memory address conversions to your local hardware, this <strong>Number Base Converter<\/strong> ensures sensitive digital electronics data never reaches external servers.<\/p>\n    <\/div>\n    <div class=\"pth-feat-box\">\n        <div class=\"pth-feat-title\">\u2699\ufe0f Step Generation Logic<\/div>\n        <p class=\"pth-feat-text\">The JavaScript engine computes division matrices in real-time, outputting the exact mathematical remainders required for computer science analysis.<\/p>\n    <\/div>\n<\/div>\n<div class=\"pth-steps-wrap\">\n    <div class=\"pth-steps-title\">How to Use the Number Base Converter<\/div>\n    <div class=\"pth-steps-grid\">\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">1<\/div>\n            <div class=\"pth-step-name\">Input Raw Value<\/div>\n            <p class=\"pth-step-desc\">Type your numerical array into the appropriate input field within the <strong>Number Base Converter<\/strong> interface.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">2<\/div>\n            <div class=\"pth-step-name\">Parse Radix Protocol<\/div>\n            <p class=\"pth-step-desc\">The browser natively identifies your starting base limit and validates the character constraints before computing.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">3<\/div>\n            <div class=\"pth-step-name\">Execute Translation<\/div>\n            <p class=\"pth-step-desc\">The algorithm automatically translates the integer across all standard programming bases instantaneously.<\/p>\n        <\/div>\n        <div class=\"pth-step-item\">\n            <div class=\"pth-step-num\">4<\/div>\n            <div class=\"pth-step-name\">Review Step Matrix<\/div>\n            <p class=\"pth-step-desc\">Examine the generated mathematical breakdown to understand how the quotient and remainder logic functioned locally.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Last updated: July 2026<\/p>\n\n\n\n<h2 id=\"\ud83d\udd34-converting-between-bases-at-any-width\" class=\"wp-block-heading\">\ud83d\udd34&nbsp;<strong>Converting between bases, at any width<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Type into any of the four fields \u2014 binary, octal, decimal, hexadecimal \u2014 and the other three update instantly. Input: 2026 in decimal. Output: 11111101010 in binary, 7ea in hex. The custom base field goes further, handling any base from 2 to 36, which covers less common cases like base-36 short codes. The bit-width selector matters for the padded binary view underneath: an 8-bit view pads 2026 differently than nothing would, since 2026 does not actually fit in 8 bits, which is a preview of the overflow idea the next tab covers properly.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-seeing-a-negative-numbers-actual-bit-pattern\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>Seeing a negative number&#8217;s actual bit pattern<\/strong><\/h2>\n\n\n<figure class=\"pth-article-figure pth-img-right\" style=\"float:right; width:600px; max-width:100%; margin:4px 0 16px 28px; clear:right;\"><img decoding=\"async\" src=\"https:\/\/schoolict.net\/tools\/wp-content\/uploads\/2026\/07\/twos-complement-bit-grid-800x447.jpeg\" alt=\"Two&#039;s complement bit grid showing the sign bit and value bits for a negative number\" width=\"600\" height=\"338\" loading=\"lazy\" data-no-lazy=\"1\" class=\"pth-article-img\" style=\"width:100%;height:auto;display:block;border-radius:10px;border:1px solid #e2e8f0;\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Type -42 into the Signed and Two&#8217;s Complement tab at 8-bit width and the bit grid lights up 11010110, with the leftmost bit shown in red as the sign bit. That red bit is not a separate flag bolted on; it is simply the top bit of an ordinary binary number, chosen so that regular addition happens to produce the right answer for negatives too. The comparison table underneath shows the same value in sign-magnitude, which flips only the top bit and is easier to read by eye but breaks normal addition \u2014 it is why every processor uses two&#8217;s complement instead.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The range check is the part people skip until it costs them a bug. Every bit width has a hard signed range: 8-bit signed runs from -128 to 127, and typing -129 or 200 triggers an overflow warning showing exactly where the wraparound landed. That is the same failure mode behind real-world integer overflow bugs, made visible instead of silent.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe2-why-3-14-is-not-really-3-14-in-memory\" class=\"wp-block-heading\">\ud83d\udfe2&nbsp;<strong>Why 3.14 is not really 3.14 in memory<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The IEEE 754 tab breaks a decimal into its three real components: a sign bit, an exponent field, and a mantissa, each colour-coded in the bit grid. Enter 3.14159 and decode the bits back to decimal, and the result is 3.141590118408203 \u2014 not because anything is broken, but because most decimal fractions cannot be stored exactly in binary floating point, the same reason 0.1 plus 0.2 famously does not equal 0.3 in most programming languages. The tool flags this directly: an exact round trip gets a green confirmation, an inexact one gets an explanation. It also recognizes the special bit patterns \u2014 an all-ones exponent means Infinity or NaN depending on the mantissa, and an all-zero exponent means a signed zero or a denormal number.<\/p>\n\n\n\n<h2 id=\"\ud83d\udfe1-bitwise-operations-and-where-this-tool-stops\" class=\"wp-block-heading\">\ud83d\udfe1&nbsp;<strong>Bitwise operations, and where this tool stops<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Bitwise tab shows AND, OR, XOR, NOT and single-bit shifts with every operand&#8217;s bits drawn out, so you can see exactly which bits combined to produce the result rather than trusting a calculator blindly. Each operation includes a one-line note on what it is actually used for in real code \u2014 AND for reading a flag, OR for setting one, XOR for toggling one, a left shift for doubling or positioning a flag.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ud83d\udd35 <strong>This handles integers and IEEE 754 floats, not arbitrary-precision math.<\/strong> Values are limited by what standard 32-bit and 64-bit JavaScript number handling supports, which covers everyday engineering and coursework but not cryptographic-scale big integers.<\/li>\n\n\n\n<li>\ud83d\udfe0 <strong>Bitwise operations here use plain JavaScript integer semantics.<\/strong> They match how a real processor treats fixed-width integers, but always confirm your bit width matches your actual target hardware or language before relying on the exact result.<\/li>\n\n\n\n<li>\ud83d\udfe3 <strong>This is representation, not logic design.<\/strong> For Boolean algebra, Karnaugh maps and gate circuits, the tools live in the electronics cluster instead \u2014 see below.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If your next step is designing the logic itself rather than representing numbers, the <a href=\"https:\/\/schoolict.net\/tools\/boolean-expression-simplifier\/\" target=\"_blank\" rel=\"noreferrer noopener\">Boolean Algebra Studio<\/a> minimizes expressions, the <a href=\"https:\/\/schoolict.net\/tools\/truth-table-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\">Truth Table Generator<\/a> prints every input\/output row, and the <a href=\"https:\/\/schoolict.net\/tools\/universal-logic-gate-converter-pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Digital Logic Studio<\/a> covers K-maps, gate conversion and circuits. To see the physical chips these values eventually run on, the <a href=\"https:\/\/schoolict.net\/tools\/7400-series-ic-finder\/\" target=\"_blank\" rel=\"noreferrer noopener\">7400 Series IC Finder<\/a> is a useful reference. And if you want to understand why any of this works the way it does \u2014 why two&#8217;s complement makes hardware simpler, why floats trade precision for range \u2014 that is the subject of the companion guide on <a href=\"https:\/\/schoolict.net\/tools\/number-base-converter-calculator-article\/\" target=\"_blank\" rel=\"noreferrer noopener\">how computers actually represent numbers<\/a> <br><\/p>\n\n\n\n<style>\n.pth-faq-section{margin:50px auto 40px;font-family:inherit;max-width:1480px;padding:0 20px;box-sizing:border-box}\n.pth-faq-header{font-size:1.8rem;font-weight:800;color:#0f172a;margin-bottom:25px;border-bottom:2px solid #e2e8f0;padding-bottom:10px;display:flex;align-items:center;gap:10px}\n.pth-faq-grid{display:grid;grid-template-columns:1fr;gap:20px}\n@media(min-width:768px){.pth-faq-grid{grid-template-columns:repeat(2,1fr)}}\n@media(min-width:1024px){.pth-faq-grid{grid-template-columns:repeat(3,1fr)}}\n.pth-faq-card{background:#f8fafc;padding:24px;border-radius:12px;border:1px solid #e2e8f0;transition:transform .2s ease;break-inside:avoid}\n.pth-faq-card:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.05)}\n.pth-faq-q{color:#0f172a;font-size:1rem;font-weight:700;margin:0 0 12px;line-height:1.4}\n.pth-faq-a{margin:0;font-size:.95rem;color:#1e293b;line-height:1.6;font-weight:500}\n<\/style>\n<div class=\"pth-faq-section\">\n  <div class=\"pth-faq-header\">\u2753 Frequently Asked Questions<\/div>\n  <div class=\"pth-faq-grid\">\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Why is two&#8217;s complement used instead of a plain sign bit?<\/p><p class=\"pth-faq-a\">Because ordinary binary addition works on it unmodified, even for negative numbers. A plain sign-flip (sign-magnitude) needs special-case logic and produces two zeros, which two&#8217;s complement avoids entirely.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Why doesn&#8217;t 3.14 come back exactly after conversion?<\/p><p class=\"pth-faq-a\">Most decimal fractions cannot be represented exactly in binary floating point. IEEE 754 stores the closest representable value, which is why the round trip shows 3.141590118408203 rather than the original.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">What does an all-ones exponent mean in IEEE 754?<\/p><p class=\"pth-faq-a\">It signals a special value. Combined with a zero mantissa it means Infinity; combined with a non-zero mantissa it means NaN, meaning the result is not a valid number.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">What is the valid range for an 8-bit signed integer?<\/p><p class=\"pth-faq-a\">-128 to 127. Anything outside that range wraps around when forced into 8 bits, which is exactly what the overflow warning in the Two&#8217;s Complement tab is catching.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">What can I actually do with AND, OR and XOR?<\/p><p class=\"pth-faq-a\">AND reads a specific bit or flag, OR sets a flag on, and XOR toggles a flag or builds a simple checksum. The Bitwise tab shows exactly which bits combine to produce each result.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Does this tool handle Boolean logic and circuits?<\/p><p class=\"pth-faq-a\">No \u2014 this is number representation, not logic design. For Boolean simplification, truth tables and gate circuits, see the Boolean Algebra Studio, Truth Table Generator and Digital Logic Studio.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">What is a denormal number?<\/p><p class=\"pth-faq-a\">A float with an all-zero exponent and a non-zero mantissa, used to represent values too small to fit the normal IEEE 754 range without losing all precision.<\/p><\/div>\n    <div class=\"pth-faq-card\"><p class=\"pth-faq-q\">Is anything I type sent anywhere?<\/p><p class=\"pth-faq-a\">No. Every calculation runs in your browser tab. Nothing is uploaded, so it keeps working with your connection switched off.<\/p><\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Number Systems Studio Pro Binary, hex and decimal are the easy part \u2014 most converters stop there. The harder questions are the ones that actually bite: what does a negative number look like in memory, why does 0.1 not print exactly, and what happens when a value goes one bit too far? This studio answers &#8230; <a title=\"Number Base Converter &amp; Calculator\" class=\"read-more\" href=\"https:\/\/schoolict.net\/tools\/number-base-converter-calculator\/\" aria-label=\"Read more about Number Base Converter &amp; Calculator\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3344,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-785","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/comments?post=785"}],"version-history":[{"count":1,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/785\/revisions"}],"predecessor-version":[{"id":6653,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/pages\/785\/revisions\/6653"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media\/3344"}],"wp:attachment":[{"href":"https:\/\/schoolict.net\/tools\/wp-json\/wp\/v2\/media?parent=785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}