Put these calculators on any site

<!-- Workroom free calculator: Markup & margin. Paste this entire block into any HTML / custom-code block. -->
<div class="wrc wrc-markup">
<style>
.wrc{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;line-height:1.55;max-width:900px;margin:0 auto}
.wrc *,.wrc *:before,.wrc *:after{box-sizing:inherit}
.wrc-card{background:#fff;border:1px solid #e3e3dd;border-radius:16px;padding:24px}
.wrc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d7a5f;margin:0 0 6px}
.wrc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:#1e1e1e}
.wrc-desc{font-size:14.5px;color:#3c3d3c;margin:0 0 18px;max-width:46em}
.wrc-body{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.wrc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrc-field{display:block;font-size:13px;font-weight:600;color:#1e1e1e;margin:0}
.wrc-field input,.wrc-field select{display:block;width:100%;margin-top:5px;font-family:inherit;font-weight:400;font-size:15px;color:#1e1e1e;padding:10px 12px;border:1.5px solid #e3e3dd;border-radius:8px;background:#f9f9f7}
.wrc-field input:focus,.wrc-field select:focus{outline:none;border-color:#3d7a5f}
.wrc-field--full{grid-column:1/-1}
.wrc-result{background:#f1f1ed;border-radius:12px;padding:18px 20px}
.wrc-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#686a6d;margin:0 0 4px}
.wrc-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;color:#1e1e1e;line-height:1.15;overflow-wrap:anywhere}
.wrc-lines{margin-top:12px;border-top:1px solid #e3e3dd;padding-top:12px;display:grid;gap:6px}
.wrc-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:13.5px;color:#3c3d3c;margin:0}
.wrc-line strong{color:#1e1e1e;margin-left:auto;text-align:right}
.wrc-warn{color:#b3402f}
.wrc-note{font-size:12px;color:#686a6d;margin:14px 0 0}
.wrc-credit{font-size:12px;color:#686a6d;margin:12px 0 0;text-align:center}
.wrc-credit a{color:#336a52;font-weight:600;text-decoration:none}
@media(max-width:680px){.wrc-body{grid-template-columns:1fr}}
@media(max-width:460px){.wrc-inputs{grid-template-columns:1fr}}
</style>
<div class="wrc-card">
  <p class="wrc-kicker">Pricing</p>
  <h3 class="wrc-title">Markup &amp; margin calculator</h3>
  <p class="wrc-desc">Markup and margin are not the same number — a 35% markup is only a 26% margin, and mixing them up quietly underprices your product. Enter your cost and markup to see the client price, or find the markup you need for a target margin.</p>
  <div class="wrc-body">
    <div class="wrc-inputs">
      <label class="wrc-field">Your cost ($)<input data-wrc="cost" type="number" value="1000" min="0" step="50" inputmode="decimal"></label>
      <label class="wrc-field">Markup (%)<input data-wrc="markup" type="number" value="35" min="0" step="1" inputmode="decimal"></label>
      <label class="wrc-field wrc-field--full">…or, what markup do I need for a target margin? (%)<input data-wrc="target" type="number" value="30" min="0" max="99" step="1" inputmode="decimal"></label>
    </div>
    <div class="wrc-result" aria-live="polite">
      <p class="wrc-rlabel">Client price</p>
      <div class="wrc-num" data-wrc="price">$1,350</div>
      <div class="wrc-lines">
        <p class="wrc-line"><span>Your profit</span><strong data-wrc="profit">$350</strong></p>
        <p class="wrc-line"><span>Actual margin</span><strong data-wrc="margin">25.9%</strong></p>
        <p class="wrc-line"><span>Markup needed for target margin</span><strong data-wrc="needed">42.9%</strong></p>
      </div>
    </div>
  </div>
  <p class="wrc-note">Margin = profit ÷ selling price. Markup = profit ÷ cost. To hit a margin of M%, mark up by M ÷ (100 − M) × 100.</p>
  <p class="wrc-credit">Free tool by <a href="https://www.myworkroom.co/?utm_source=calculator&amp;utm_medium=embed&amp;utm_campaign=markup" target="_blank" rel="noopener">Workroom</a> — business management software for interior design firms.</p>
</div>
<script>
(function(){
  var roots=document.querySelectorAll(".wrc-markup:not([data-wrc-init])");
  for(var i=0;i<roots.length;i++)(function(root){
    root.setAttribute("data-wrc-init","1");
    function el(k){return root.querySelector('[data-wrc="'+k+'"]')}
    function num(k){var v=parseFloat(el(k).value);return isNaN(v)?0:v}
    var usd=new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0});
    function update(){
      var cost=num("cost"),markup=num("markup"),target=num("target");
      var price=cost*(1+markup/100),profit=price-cost;
      el("price").textContent=usd.format(price);
      el("profit").textContent=usd.format(profit);
      el("margin").textContent=(price>0?(profit/price)*100:0).toFixed(1)+"%";
      el("needed").textContent=target>=100?"impossible (margin must be under 100%)":((target/(100-target))*100).toFixed(1)+"%";
    }
    root.addEventListener("input",update);
    update();
  })(roots[i]);
})();
</script>
</div>

<!-- Workroom free calculator: Billable hourly rate. Paste this entire block into any HTML / custom-code block. -->
<div class="wrc wrc-rate">
<style>
.wrc{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;line-height:1.55;max-width:900px;margin:0 auto}
.wrc *,.wrc *:before,.wrc *:after{box-sizing:inherit}
.wrc-card{background:#fff;border:1px solid #e3e3dd;border-radius:16px;padding:24px}
.wrc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d7a5f;margin:0 0 6px}
.wrc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:#1e1e1e}
.wrc-desc{font-size:14.5px;color:#3c3d3c;margin:0 0 18px;max-width:46em}
.wrc-body{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.wrc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrc-field{display:block;font-size:13px;font-weight:600;color:#1e1e1e;margin:0}
.wrc-field input,.wrc-field select{display:block;width:100%;margin-top:5px;font-family:inherit;font-weight:400;font-size:15px;color:#1e1e1e;padding:10px 12px;border:1.5px solid #e3e3dd;border-radius:8px;background:#f9f9f7}
.wrc-field input:focus,.wrc-field select:focus{outline:none;border-color:#3d7a5f}
.wrc-field--full{grid-column:1/-1}
.wrc-result{background:#f1f1ed;border-radius:12px;padding:18px 20px}
.wrc-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#686a6d;margin:0 0 4px}
.wrc-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;color:#1e1e1e;line-height:1.15;overflow-wrap:anywhere}
.wrc-lines{margin-top:12px;border-top:1px solid #e3e3dd;padding-top:12px;display:grid;gap:6px}
.wrc-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:13.5px;color:#3c3d3c;margin:0}
.wrc-line strong{color:#1e1e1e;margin-left:auto;text-align:right}
.wrc-warn{color:#b3402f}
.wrc-note{font-size:12px;color:#686a6d;margin:14px 0 0}
.wrc-credit{font-size:12px;color:#686a6d;margin:12px 0 0;text-align:center}
.wrc-credit a{color:#336a52;font-weight:600;text-decoration:none}
@media(max-width:680px){.wrc-body{grid-template-columns:1fr}}
@media(max-width:460px){.wrc-inputs{grid-template-columns:1fr}}
</style>
<div class="wrc-card">
  <p class="wrc-kicker">Your business</p>
  <h3 class="wrc-title">Billable hourly rate calculator</h3>
  <p class="wrc-desc">Your rate has to cover more than your salary — overhead, unbillable hours, and profit all come out of it. This tells you the minimum rate that actually supports your firm.</p>
  <div class="wrc-body">
    <div class="wrc-inputs">
      <label class="wrc-field">Target annual income ($)<input data-wrc="income" type="number" value="120000" min="0" step="5000" inputmode="decimal"></label>
      <label class="wrc-field">Annual overhead ($)<input data-wrc="overhead" type="number" value="60000" min="0" step="5000" inputmode="decimal"></label>
      <label class="wrc-field">Profit margin (%)<input data-wrc="profit" type="number" value="10" min="0" max="90" step="1" inputmode="decimal"></label>
      <label class="wrc-field">Billable hours / week<input data-wrc="hours" type="number" value="25" min="1" max="60" step="1" inputmode="decimal"></label>
      <label class="wrc-field">Working weeks / year<input data-wrc="weeks" type="number" value="46" min="1" max="52" step="1" inputmode="decimal"></label>
    </div>
    <div class="wrc-result" aria-live="polite">
      <p class="wrc-rlabel">Minimum hourly rate</p>
      <div class="wrc-num" data-wrc="rate">$174</div>
      <div class="wrc-lines">
        <p class="wrc-line"><span>Annual revenue target</span><strong data-wrc="revenue">$200,000</strong></p>
        <p class="wrc-line"><span>Billable hours per year</span><strong data-wrc="annual">1,150</strong></p>
      </div>
    </div>
  </div>
  <p class="wrc-note">Overhead includes rent, software, insurance, marketing, and non-billable staff time. Most designers realistically bill 20–30 hours a week — the rest is running the firm.</p>
  <p class="wrc-credit">Free tool by <a href="https://www.myworkroom.co/?utm_source=calculator&amp;utm_medium=embed&amp;utm_campaign=rate" target="_blank" rel="noopener">Workroom</a> — business management software for interior design firms.</p>
</div>
<script>
(function(){
  var roots=document.querySelectorAll(".wrc-rate:not([data-wrc-init])");
  for(var i=0;i<roots.length;i++)(function(root){
    root.setAttribute("data-wrc-init","1");
    function el(k){return root.querySelector('[data-wrc="'+k+'"]')}
    function num(k){var v=parseFloat(el(k).value);return isNaN(v)?0:v}
    var usd=new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0});
    var int=new Intl.NumberFormat("en-US");
    function update(){
      var costs=num("income")+num("overhead");
      var p=Math.min(num("profit"),90);
      var hours=num("hours")*num("weeks");
      var revenue=costs/(1-p/100);
      el("revenue").textContent=usd.format(revenue);
      el("annual").textContent=int.format(Math.round(hours));
      el("rate").textContent=hours>0?usd.format(Math.ceil(revenue/hours)):"—";
    }
    root.addEventListener("input",update);
    update();
  })(roots[i]);
})();
</script>
</div>

<!-- Workroom free calculator: Design fee estimator. Paste this entire block into any HTML / custom-code block. -->
<div class="wrc wrc-fee">
<style>
.wrc{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;line-height:1.55;max-width:900px;margin:0 auto}
.wrc *,.wrc *:before,.wrc *:after{box-sizing:inherit}
.wrc-card{background:#fff;border:1px solid #e3e3dd;border-radius:16px;padding:24px}
.wrc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d7a5f;margin:0 0 6px}
.wrc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:#1e1e1e}
.wrc-desc{font-size:14.5px;color:#3c3d3c;margin:0 0 18px;max-width:46em}
.wrc-body{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.wrc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrc-field{display:block;font-size:13px;font-weight:600;color:#1e1e1e;margin:0}
.wrc-field input,.wrc-field select{display:block;width:100%;margin-top:5px;font-family:inherit;font-weight:400;font-size:15px;color:#1e1e1e;padding:10px 12px;border:1.5px solid #e3e3dd;border-radius:8px;background:#f9f9f7}
.wrc-field input:focus,.wrc-field select:focus{outline:none;border-color:#3d7a5f}
.wrc-field--full{grid-column:1/-1}
.wrc-result{background:#f1f1ed;border-radius:12px;padding:18px 20px}
.wrc-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#686a6d;margin:0 0 4px}
.wrc-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;color:#1e1e1e;line-height:1.15;overflow-wrap:anywhere}
.wrc-lines{margin-top:12px;border-top:1px solid #e3e3dd;padding-top:12px;display:grid;gap:6px}
.wrc-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:13.5px;color:#3c3d3c;margin:0}
.wrc-line strong{color:#1e1e1e;margin-left:auto;text-align:right}
.wrc-warn{color:#b3402f}
.wrc-note{font-size:12px;color:#686a6d;margin:14px 0 0}
.wrc-credit{font-size:12px;color:#686a6d;margin:12px 0 0;text-align:center}
.wrc-credit a{color:#336a52;font-weight:600;text-decoration:none}
@media(max-width:680px){.wrc-body{grid-template-columns:1fr}}
@media(max-width:460px){.wrc-inputs{grid-template-columns:1fr}}
</style>
<div class="wrc-card">
  <p class="wrc-kicker">Proposals</p>
  <h3 class="wrc-title">Design fee estimator</h3>
  <p class="wrc-desc">A sanity-check range for flat fees, based on typical hours per room by scope. Use it as a starting point, then refine with your own time data.</p>
  <div class="wrc-body">
    <div class="wrc-inputs">
      <label class="wrc-field">Number of rooms<input data-wrc="rooms" type="number" value="5" min="1" max="40" step="1" inputmode="decimal"></label>
      <label class="wrc-field">Scope of work
        <select data-wrc="scope">
          <option value="12,20">Refresh / furnishings only (12–20 h per room)</option>
          <option value="25,45" selected>Full design (25–45 h per room)</option>
          <option value="45,75">Renovation / construction (45–75 h per room)</option>
        </select>
      </label>
      <label class="wrc-field">Your hourly rate ($)<input data-wrc="rate" type="number" value="150" min="0" step="10" inputmode="decimal"></label>
    </div>
    <div class="wrc-result" aria-live="polite">
      <p class="wrc-rlabel">Estimated fee range</p>
      <div class="wrc-num" data-wrc="range">$18,750 – $33,750</div>
      <div class="wrc-lines">
        <p class="wrc-line"><span>Estimated hours</span><strong data-wrc="hours">125 – 225</strong></p>
        <p class="wrc-line"><span>Midpoint fee</span><strong data-wrc="mid">$26,250</strong></p>
      </div>
    </div>
  </div>
  <p class="wrc-note">Hours per room vary with client decisiveness, custom work, and revision rounds. Firms that track time against phases price the next project from evidence, not instinct.</p>
  <p class="wrc-credit">Free tool by <a href="https://www.myworkroom.co/?utm_source=calculator&amp;utm_medium=embed&amp;utm_campaign=fee" target="_blank" rel="noopener">Workroom</a> — business management software for interior design firms.</p>
</div>
<script>
(function(){
  var roots=document.querySelectorAll(".wrc-fee:not([data-wrc-init])");
  for(var i=0;i<roots.length;i++)(function(root){
    root.setAttribute("data-wrc-init","1");
    function el(k){return root.querySelector('[data-wrc="'+k+'"]')}
    function num(k){var v=parseFloat(el(k).value);return isNaN(v)?0:v}
    var usd=new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0});
    var int=new Intl.NumberFormat("en-US");
    function update(){
      var rooms=num("rooms"),rate=num("rate");
      var range=el("scope").value.split(",");
      var lo=rooms*parseFloat(range[0]),hi=rooms*parseFloat(range[1]);
      el("hours").textContent=int.format(lo)+" – "+int.format(hi);
      el("range").textContent=usd.format(lo*rate)+" – "+usd.format(hi*rate);
      el("mid").textContent=usd.format(((lo+hi)/2)*rate);
    }
    root.addEventListener("input",update);
    update();
  })(roots[i]);
})();
</script>
</div>

<!-- Workroom free calculator: Paint. Paste this entire block into any HTML / custom-code block. -->
<div class="wrc wrc-paint">
<style>
.wrc{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;line-height:1.55;max-width:900px;margin:0 auto}
.wrc *,.wrc *:before,.wrc *:after{box-sizing:inherit}
.wrc-card{background:#fff;border:1px solid #e3e3dd;border-radius:16px;padding:24px}
.wrc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d7a5f;margin:0 0 6px}
.wrc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:#1e1e1e}
.wrc-desc{font-size:14.5px;color:#3c3d3c;margin:0 0 18px;max-width:46em}
.wrc-body{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.wrc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrc-field{display:block;font-size:13px;font-weight:600;color:#1e1e1e;margin:0}
.wrc-field input,.wrc-field select{display:block;width:100%;margin-top:5px;font-family:inherit;font-weight:400;font-size:15px;color:#1e1e1e;padding:10px 12px;border:1.5px solid #e3e3dd;border-radius:8px;background:#f9f9f7}
.wrc-field input:focus,.wrc-field select:focus{outline:none;border-color:#3d7a5f}
.wrc-field--full{grid-column:1/-1}
.wrc-result{background:#f1f1ed;border-radius:12px;padding:18px 20px}
.wrc-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#686a6d;margin:0 0 4px}
.wrc-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;color:#1e1e1e;line-height:1.15;overflow-wrap:anywhere}
.wrc-lines{margin-top:12px;border-top:1px solid #e3e3dd;padding-top:12px;display:grid;gap:6px}
.wrc-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:13.5px;color:#3c3d3c;margin:0}
.wrc-line strong{color:#1e1e1e;margin-left:auto;text-align:right}
.wrc-warn{color:#b3402f}
.wrc-note{font-size:12px;color:#686a6d;margin:14px 0 0}
.wrc-credit{font-size:12px;color:#686a6d;margin:12px 0 0;text-align:center}
.wrc-credit a{color:#336a52;font-weight:600;text-decoration:none}
@media(max-width:680px){.wrc-body{grid-template-columns:1fr}}
@media(max-width:460px){.wrc-inputs{grid-template-columns:1fr}}
</style>
<div class="wrc-card">
  <p class="wrc-kicker">Specification</p>
  <h3 class="wrc-title">Paint calculator</h3>
  <p class="wrc-desc">How many gallons for the walls of a room, accounting for doors, windows, and coats.</p>
  <div class="wrc-body">
    <div class="wrc-inputs">
      <label class="wrc-field">Room length (ft)<input data-wrc="length" type="number" value="14" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Room width (ft)<input data-wrc="width" type="number" value="16" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Ceiling height (ft)<input data-wrc="height" type="number" value="9" min="6" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Coats<input data-wrc="coats" type="number" value="2" min="1" max="4" step="1" inputmode="decimal"></label>
      <label class="wrc-field">Doors<input data-wrc="doors" type="number" value="2" min="0" max="10" step="1" inputmode="decimal"></label>
      <label class="wrc-field">Windows<input data-wrc="windows" type="number" value="3" min="0" max="20" step="1" inputmode="decimal"></label>
    </div>
    <div class="wrc-result" aria-live="polite">
      <p class="wrc-rlabel">Paint needed</p>
      <div class="wrc-num" data-wrc="gallons">2.6 gal</div>
      <div class="wrc-lines">
        <p class="wrc-line"><span>Wall area to paint</span><strong data-wrc="area">453 sq ft</strong></p>
        <p class="wrc-line"><span>Suggested purchase</span><strong data-wrc="cans">3 × 1-gal cans</strong></p>
      </div>
    </div>
  </div>
  <p class="wrc-note">Assumes 350 sq ft coverage per gallon, 21 sq ft per door, and 15 sq ft per window. Walls only — add separately for ceiling and trim. Dark or dramatic color changes may need an extra coat.</p>
  <p class="wrc-credit">Free tool by <a href="https://www.myworkroom.co/?utm_source=calculator&amp;utm_medium=embed&amp;utm_campaign=paint" target="_blank" rel="noopener">Workroom</a> — business management software for interior design firms.</p>
</div>
<script>
(function(){
  var roots=document.querySelectorAll(".wrc-paint:not([data-wrc-init])");
  for(var i=0;i<roots.length;i++)(function(root){
    root.setAttribute("data-wrc-init","1");
    function el(k){return root.querySelector('[data-wrc="'+k+'"]')}
    function num(k){var v=parseFloat(el(k).value);return isNaN(v)?0:v}
    var int=new Intl.NumberFormat("en-US");
    function update(){
      var area=2*(num("length")+num("width"))*num("height")-num("doors")*21-num("windows")*15;
      area=Math.max(area,0);
      var gallons=(area*Math.max(num("coats"),1))/350;
      el("area").textContent=int.format(Math.round(area))+" sq ft";
      el("gallons").textContent=(Math.ceil(gallons*10)/10)+" gal";
      el("cans").textContent=gallons>0?Math.ceil(gallons)+" × 1-gal cans":"—";
    }
    root.addEventListener("input",update);
    update();
  })(roots[i]);
})();
</script>
</div>

<!-- Workroom free calculator: Wallpaper. Paste this entire block into any HTML / custom-code block. -->
<div class="wrc wrc-wallpaper">
<style>
.wrc{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;line-height:1.55;max-width:900px;margin:0 auto}
.wrc *,.wrc *:before,.wrc *:after{box-sizing:inherit}
.wrc-card{background:#fff;border:1px solid #e3e3dd;border-radius:16px;padding:24px}
.wrc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d7a5f;margin:0 0 6px}
.wrc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:#1e1e1e}
.wrc-desc{font-size:14.5px;color:#3c3d3c;margin:0 0 18px;max-width:46em}
.wrc-body{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.wrc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrc-field{display:block;font-size:13px;font-weight:600;color:#1e1e1e;margin:0}
.wrc-field input,.wrc-field select{display:block;width:100%;margin-top:5px;font-family:inherit;font-weight:400;font-size:15px;color:#1e1e1e;padding:10px 12px;border:1.5px solid #e3e3dd;border-radius:8px;background:#f9f9f7}
.wrc-field input:focus,.wrc-field select:focus{outline:none;border-color:#3d7a5f}
.wrc-field--full{grid-column:1/-1}
.wrc-result{background:#f1f1ed;border-radius:12px;padding:18px 20px}
.wrc-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#686a6d;margin:0 0 4px}
.wrc-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;color:#1e1e1e;line-height:1.15;overflow-wrap:anywhere}
.wrc-lines{margin-top:12px;border-top:1px solid #e3e3dd;padding-top:12px;display:grid;gap:6px}
.wrc-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:13.5px;color:#3c3d3c;margin:0}
.wrc-line strong{color:#1e1e1e;margin-left:auto;text-align:right}
.wrc-warn{color:#b3402f}
.wrc-note{font-size:12px;color:#686a6d;margin:14px 0 0}
.wrc-credit{font-size:12px;color:#686a6d;margin:12px 0 0;text-align:center}
.wrc-credit a{color:#336a52;font-weight:600;text-decoration:none}
@media(max-width:680px){.wrc-body{grid-template-columns:1fr}}
@media(max-width:460px){.wrc-inputs{grid-template-columns:1fr}}
</style>
<div class="wrc-card">
  <p class="wrc-kicker">Specification</p>
  <h3 class="wrc-title">Wallpaper calculator</h3>
  <p class="wrc-desc">Rolls needed for a wall or room, including the waste from matching a pattern repeat — the part everyone underestimates.</p>
  <div class="wrc-body">
    <div class="wrc-inputs">
      <label class="wrc-field">Total wall width (ft)<input data-wrc="width" type="number" value="24" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Wall height (ft)<input data-wrc="height" type="number" value="9" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Roll width (in)<input data-wrc="rollw" type="number" value="20.5" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Roll length (ft)<input data-wrc="rolll" type="number" value="33" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field wrc-field--full">Vertical pattern repeat (in) — 0 for none<input data-wrc="repeat" type="number" value="18" min="0" step="0.5" inputmode="decimal"></label>
    </div>
    <div class="wrc-result" aria-live="polite">
      <p class="wrc-rlabel">Rolls needed</p>
      <div class="wrc-num" data-wrc="rolls">5 rolls</div>
      <div class="wrc-lines">
        <p class="wrc-line"><span>Strips required</span><strong data-wrc="strips">15</strong></p>
        <p class="wrc-line"><span>Usable strips per roll</span><strong data-wrc="perroll">3</strong></p>
        <p class="wrc-line"><span>Cut length per strip</span><strong data-wrc="striplen">126 in</strong></p>
      </div>
    </div>
  </div>
  <p class="wrc-note">Includes a 4" trim allowance per strip and rounds each strip up to a full pattern repeat. Order all rolls from the same dye lot, and confirm quantities with your installer before purchasing — for large repeats or grasscloth, add a safety roll.</p>
  <p class="wrc-credit">Free tool by <a href="https://www.myworkroom.co/?utm_source=calculator&amp;utm_medium=embed&amp;utm_campaign=wallpaper" target="_blank" rel="noopener">Workroom</a> — business management software for interior design firms.</p>
</div>
<script>
(function(){
  var roots=document.querySelectorAll(".wrc-wallpaper:not([data-wrc-init])");
  for(var i=0;i<roots.length;i++)(function(root){
    root.setAttribute("data-wrc-init","1");
    function el(k){return root.querySelector('[data-wrc="'+k+'"]')}
    function num(k){var v=parseFloat(el(k).value);return isNaN(v)?0:v}
    var int=new Intl.NumberFormat("en-US");
    function update(){
      var wallIn=num("width")*12,rollW=num("rollw"),rollLenIn=num("rolll")*12,repeat=num("repeat");
      var stripLen=num("height")*12+4;
      if(repeat>0)stripLen=Math.ceil(stripLen/repeat)*repeat;
      var strips=rollW>0?Math.ceil(wallIn/rollW):0;
      var perRoll=stripLen>0?Math.floor(rollLenIn/stripLen):0;
      el("strips").textContent=strips?int.format(strips):"—";
      el("striplen").textContent=Math.round(stripLen)+" in";
      if(perRoll<1||strips<1){
        el("perroll").textContent="0";
        el("rolls").textContent="roll too short";
        el("rolls").className="wrc-num wrc-warn";
      }else{
        el("perroll").textContent=int.format(perRoll);
        var rolls=Math.ceil(strips/perRoll);
        el("rolls").textContent=rolls+(rolls===1?" roll":" rolls");
        el("rolls").className="wrc-num";
      }
    }
    root.addEventListener("input",update);
    update();
  })(roots[i]);
})();
</script>
</div>

<!-- Workroom free calculator: Flooring & tile. Paste this entire block into any HTML / custom-code block. -->
<div class="wrc wrc-flooring">
<style>
.wrc{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;line-height:1.55;max-width:900px;margin:0 auto}
.wrc *,.wrc *:before,.wrc *:after{box-sizing:inherit}
.wrc-card{background:#fff;border:1px solid #e3e3dd;border-radius:16px;padding:24px}
.wrc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d7a5f;margin:0 0 6px}
.wrc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:#1e1e1e}
.wrc-desc{font-size:14.5px;color:#3c3d3c;margin:0 0 18px;max-width:46em}
.wrc-body{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.wrc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrc-field{display:block;font-size:13px;font-weight:600;color:#1e1e1e;margin:0}
.wrc-field input,.wrc-field select{display:block;width:100%;margin-top:5px;font-family:inherit;font-weight:400;font-size:15px;color:#1e1e1e;padding:10px 12px;border:1.5px solid #e3e3dd;border-radius:8px;background:#f9f9f7}
.wrc-field input:focus,.wrc-field select:focus{outline:none;border-color:#3d7a5f}
.wrc-field--full{grid-column:1/-1}
.wrc-result{background:#f1f1ed;border-radius:12px;padding:18px 20px}
.wrc-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#686a6d;margin:0 0 4px}
.wrc-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;color:#1e1e1e;line-height:1.15;overflow-wrap:anywhere}
.wrc-lines{margin-top:12px;border-top:1px solid #e3e3dd;padding-top:12px;display:grid;gap:6px}
.wrc-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:13.5px;color:#3c3d3c;margin:0}
.wrc-line strong{color:#1e1e1e;margin-left:auto;text-align:right}
.wrc-warn{color:#b3402f}
.wrc-note{font-size:12px;color:#686a6d;margin:14px 0 0}
.wrc-credit{font-size:12px;color:#686a6d;margin:12px 0 0;text-align:center}
.wrc-credit a{color:#336a52;font-weight:600;text-decoration:none}
@media(max-width:680px){.wrc-body{grid-template-columns:1fr}}
@media(max-width:460px){.wrc-inputs{grid-template-columns:1fr}}
</style>
<div class="wrc-card">
  <p class="wrc-kicker">Specification</p>
  <h3 class="wrc-title">Flooring &amp; tile calculator</h3>
  <p class="wrc-desc">Material to order including waste — cuts, breakage, and pattern matching — plus budget if you add a price.</p>
  <div class="wrc-body">
    <div class="wrc-inputs">
      <label class="wrc-field">Room length (ft)<input data-wrc="length" type="number" value="20" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Room width (ft)<input data-wrc="width" type="number" value="15" min="1" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Waste factor (%)
        <select data-wrc="waste">
          <option value="5">5% — simple layout, large format</option>
          <option value="10" selected>10% — standard install</option>
          <option value="15">15% — diagonal / herringbone</option>
          <option value="20">20% — complex pattern, many cuts</option>
        </select>
      </label>
      <label class="wrc-field">Price per sq ft ($, optional)<input data-wrc="price" type="number" value="8.50" min="0" step="0.25" inputmode="decimal"></label>
    </div>
    <div class="wrc-result" aria-live="polite">
      <p class="wrc-rlabel">Order quantity</p>
      <div class="wrc-num" data-wrc="material">330 sq ft</div>
      <div class="wrc-lines">
        <p class="wrc-line"><span>Room area</span><strong data-wrc="area">300 sq ft</strong></p>
        <p class="wrc-line"><span>Estimated material cost</span><strong data-wrc="cost">$2,805</strong></p>
      </div>
    </div>
  </div>
  <p class="wrc-note">For L-shaped or irregular rooms, split the space into rectangles and add the areas. Round up to full boxes when ordering — leftover material is your future repair stock.</p>
  <p class="wrc-credit">Free tool by <a href="https://www.myworkroom.co/?utm_source=calculator&amp;utm_medium=embed&amp;utm_campaign=flooring" target="_blank" rel="noopener">Workroom</a> — business management software for interior design firms.</p>
</div>
<script>
(function(){
  var roots=document.querySelectorAll(".wrc-flooring:not([data-wrc-init])");
  for(var i=0;i<roots.length;i++)(function(root){
    root.setAttribute("data-wrc-init","1");
    function el(k){return root.querySelector('[data-wrc="'+k+'"]')}
    function num(k){var v=parseFloat(el(k).value);return isNaN(v)?0:v}
    var usd=new Intl.NumberFormat("en-US",{style:"currency",currency:"USD",maximumFractionDigits:0});
    var int=new Intl.NumberFormat("en-US");
    function update(){
      var area=num("length")*num("width");
      var material=Math.ceil(area*(1+parseFloat(el("waste").value)/100));
      var price=num("price");
      el("area").textContent=int.format(Math.round(area))+" sq ft";
      el("material").textContent=int.format(material)+" sq ft";
      el("cost").textContent=price>0?usd.format(material*price):"—";
    }
    root.addEventListener("input",update);
    update();
  })(roots[i]);
})();
</script>
</div>

<!-- Workroom free calculator: Rug size. Paste this entire block into any HTML / custom-code block. -->
<div class="wrc wrc-rug">
<style>
.wrc{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e1e1e;line-height:1.55;max-width:900px;margin:0 auto}
.wrc *,.wrc *:before,.wrc *:after{box-sizing:inherit}
.wrc-card{background:#fff;border:1px solid #e3e3dd;border-radius:16px;padding:24px}
.wrc-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3d7a5f;margin:0 0 6px}
.wrc-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:22px;line-height:1.2;margin:0 0 8px;color:#1e1e1e}
.wrc-desc{font-size:14.5px;color:#3c3d3c;margin:0 0 18px;max-width:46em}
.wrc-body{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.wrc-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wrc-field{display:block;font-size:13px;font-weight:600;color:#1e1e1e;margin:0}
.wrc-field input,.wrc-field select{display:block;width:100%;margin-top:5px;font-family:inherit;font-weight:400;font-size:15px;color:#1e1e1e;padding:10px 12px;border:1.5px solid #e3e3dd;border-radius:8px;background:#f9f9f7}
.wrc-field input:focus,.wrc-field select:focus{outline:none;border-color:#3d7a5f}
.wrc-field--full{grid-column:1/-1}
.wrc-result{background:#f1f1ed;border-radius:12px;padding:18px 20px}
.wrc-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#686a6d;margin:0 0 4px}
.wrc-num{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;font-size:28px;color:#1e1e1e;line-height:1.15;overflow-wrap:anywhere}
.wrc-lines{margin-top:12px;border-top:1px solid #e3e3dd;padding-top:12px;display:grid;gap:6px}
.wrc-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;font-size:13.5px;color:#3c3d3c;margin:0}
.wrc-line strong{color:#1e1e1e;margin-left:auto;text-align:right}
.wrc-warn{color:#b3402f}
.wrc-note{font-size:12px;color:#686a6d;margin:14px 0 0}
.wrc-credit{font-size:12px;color:#686a6d;margin:12px 0 0;text-align:center}
.wrc-credit a{color:#336a52;font-weight:600;text-decoration:none}
@media(max-width:680px){.wrc-body{grid-template-columns:1fr}}
@media(max-width:460px){.wrc-inputs{grid-template-columns:1fr}}
</style>
<div class="wrc-card">
  <p class="wrc-kicker">Specification</p>
  <h3 class="wrc-title">Rug size calculator</h3>
  <p class="wrc-desc">The right standard rug size for a room, keeping a proper border of visible floor.</p>
  <div class="wrc-body">
    <div class="wrc-inputs">
      <label class="wrc-field">Room length (ft)<input data-wrc="length" type="number" value="13" min="4" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field">Room width (ft)<input data-wrc="width" type="number" value="11" min="4" step="0.5" inputmode="decimal"></label>
      <label class="wrc-field wrc-field--full">Room type
        <select data-wrc="room">
          <option value="living" selected>Living room</option>
          <option value="bedroom">Bedroom</option>
          <option value="dining">Dining room</option>
        </select>
      </label>
    </div>
    <div class="wrc-result" aria-live="polite">
      <p class="wrc-rlabel">Recommended size</p>
      <div class="wrc-num" data-wrc="size">8 × 10 ft</div>
      <div class="wrc-lines">
        <p class="wrc-line"><span>Resulting floor border</span><strong data-wrc="border">~18 in</strong></p>
        <p class="wrc-line"><span>Also works</span><strong data-wrc="alt">6 × 9 ft</strong></p>
      </div>
      <p class="wrc-note" data-wrc="tip" style="margin-top:10px"></p>
    </div>
  </div>
  <p class="wrc-note">Based on an 18-inch border of visible floor on each side, snapped to standard rug sizes (5×8 through 12×18). Custom and round sizes follow the same border rule.</p>
  <p class="wrc-credit">Free tool by <a href="https://www.myworkroom.co/?utm_source=calculator&amp;utm_medium=embed&amp;utm_campaign=rug" target="_blank" rel="noopener">Workroom</a> — business management software for interior design firms.</p>
</div>
<script>
(function(){
  var roots=document.querySelectorAll(".wrc-rug:not([data-wrc-init])");
  for(var i=0;i<roots.length;i++)(function(root){
    root.setAttribute("data-wrc-init","1");
    function el(k){return root.querySelector('[data-wrc="'+k+'"]')}
    function num(k){var v=parseFloat(el(k).value);return isNaN(v)?0:v}
    var RUGS=[[5,8],[6,9],[8,10],[9,12],[10,14],[12,15],[12,18]];
    var TIPS={
      living:"Living room: at minimum, the front legs of every seating piece should sit on the rug.",
      bedroom:"Bedroom: the rug should extend 18–24 inches beyond each side of the bed.",
      dining:"Dining room: chairs should stay on the rug even when pulled out — size the rug at least 24 inches beyond the table on all sides."
    };
    function update(){
      var roomL=Math.max(num("length"),num("width"));
      var roomW=Math.min(num("length"),num("width"));
      var tL=roomL-3,tW=roomW-3;
      var fits=RUGS.filter(function(r){return r[1]<=tL&&r[0]<=tW});
      var tip=TIPS[el("room").value];
      if(fits.length===0){
        el("size").textContent="4 × 6 ft";
        el("border").textContent="—";
        el("alt").textContent="custom size";
        el("tip").textContent="This room is smaller than standard large-rug territory — a 4×6, a round rug, or a custom size will sit better. "+tip;
        return;
      }
      var best=fits[fits.length-1];
      var alt=fits.length>1?fits[fits.length-2]:null;
      var bL=((roomL-best[1])/2)*12,bW=((roomW-best[0])/2)*12;
      var lo=Math.round(Math.min(bL,bW)),hi=Math.round(Math.max(bL,bW));
      el("size").textContent=best[0]+" × "+best[1]+" ft";
      el("border").textContent=lo===hi?"~"+lo+" in":"~"+lo+"–"+hi+" in";
      el("alt").textContent=alt?alt[0]+" × "+alt[1]+" ft":"—";
      el("tip").textContent=tip;
    }
    root.addEventListener("input",update);
    update();
  })(roots[i]);
})();
</script>
</div>