@jjlmoya/utils-cooking 1.32.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-cooking",
-    "version": "1.32.0",
+    "version": "1.33.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -17,7 +17,7 @@
         "access": "public"
     },
     "scripts": {
-        "dev": "astro dev",
+        "dev": "astro dev --host",
         "start": "astro dev",
         "build": "astro build",
         "preview": "astro preview",

package/src/category/index.ts

@@ -15,6 +15,7 @@ import { lactoFermentationSalt } from '../tool/lacto-fermentation-salt-calculato
 import { spherificationBath } from '../tool/spherification-bath-calculator/entry';
 import { iceCreamPacPod } from '../tool/ice-cream-pac-pod/entry';
 import { botulismCanningSafety } from '../tool/botulism-canning-safety/entry';
+import { meatBinder } from '../tool/meat-binder-transglutaminase-calculator/entry';
 
 export const cookingCategory: CookingCategoryEntry = {
   icon: 'mdi:chef-hat',
@@ -35,6 +36,7 @@ export const cookingCategory: CookingCategoryEntry = {
     spherificationBath,
     iceCreamPacPod,
     botulismCanningSafety,
+    meatBinder,
   ],
 
   i18n: {

package/src/entries.ts

@@ -14,6 +14,7 @@ export { yeastConverter } from './tool/yeast-converter/entry';
 export { lactoFermentationSalt } from './tool/lacto-fermentation-salt-calculator/entry';
 export { spherificationBath } from './tool/spherification-bath-calculator/entry';
 export { iceCreamPacPod } from './tool/ice-cream-pac-pod/entry';
+export { meatBinder } from './tool/meat-binder-transglutaminase-calculator/entry';
 export { botulismCanningSafety } from './tool/botulism-canning-safety/entry';
 export { cookingCategory } from './category';
 import { americanKitchenConverter } from './tool/american-kitchen-converter/entry';
@@ -33,5 +34,6 @@ import { lactoFermentationSalt } from './tool/lacto-fermentation-salt-calculator
 import { spherificationBath } from './tool/spherification-bath-calculator/entry';
 import { iceCreamPacPod } from './tool/ice-cream-pac-pod/entry';
 import { botulismCanningSafety } from './tool/botulism-canning-safety/entry';
-export const ALL_ENTRIES = [americanKitchenConverter, bananaCare, brine, cookwareGuide, eggTimer, ingredientRescaler, kitchenTimer, meringuePeak, moldScaler, pizza, rouxGuide, sourdoughCalculator, yeastConverter, lactoFermentationSalt, spherificationBath, iceCreamPacPod, botulismCanningSafety];
+import { meatBinder } from './tool/meat-binder-transglutaminase-calculator/entry';
+export const ALL_ENTRIES = [americanKitchenConverter, bananaCare, brine, cookwareGuide, eggTimer, ingredientRescaler, kitchenTimer, meringuePeak, moldScaler, pizza, rouxGuide, sourdoughCalculator, yeastConverter, lactoFermentationSalt, spherificationBath, iceCreamPacPod, botulismCanningSafety, meatBinder];
 

package/src/index.ts

@@ -18,6 +18,7 @@ export { LACTO_FERMENTATION_SALT_TOOL } from './tool/lacto-fermentation-salt-cal
 export { SPHERIFICATION_BATH_TOOL } from './tool/spherification-bath-calculator';
 export { ICE_CREAM_PAC_POD_TOOL } from './tool/ice-cream-pac-pod';
 export { BOTULISM_CANNING_SAFETY_TOOL } from './tool/botulism-canning-safety';
+export { MEAT_BINDER_TRANSGLUTAMINASE_TOOL } from './tool/meat-binder-transglutaminase-calculator';
 
 
 export type {

package/src/tests/i18n-titles.test.ts

@@ -36,7 +36,7 @@ describe("i18n titles for FAQ", () => {
 
   it("should have 17 tools with complete i18n setup", async () => {
     const completeTools = ALL_TOOLS.filter((t) => Object.keys(t.entry.i18n).length > 1);
-    expect(completeTools.length).toBe(17);
+    expect(completeTools.length).toBe(18);
   });
 
   it("tool IDs should be correctly registered", () => {

package/src/tests/locale_completeness.test.ts

@@ -24,8 +24,8 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 17 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(17);
+  it('all 18 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(18);
   });
 
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { cookingCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 17 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(17);
+    it('should have 18 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(18);
     });
 
 

package/src/tool/meat-binder-transglutaminase-calculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as BibliographyComponent } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<BibliographyComponent links={bibliography} />

package/src/tool/meat-binder-transglutaminase-calculator/bibliography.ts

@@ -0,0 +1,14 @@
+export const bibliography = [
+  {
+    name: 'Modernist Cuisine: The Art and Science of Cooking',
+    url: 'https://modernistcuisine.com/books/modernist-cuisine/',
+  },
+  {
+    name: 'Cooking for Geeks: Real Science, Great Hacks, and Good Food',
+    url: 'https://www.cookingforgeeks.com/',
+  },
+  {
+    name: 'The Science of Transglutaminase in Food Processing',
+    url: 'https://www.sciencedirect.com/science/article/pii/S0924224498000387',
+  },
+];

package/src/tool/meat-binder-transglutaminase-calculator/component.astro

@@ -0,0 +1,249 @@
+---
+import TissueSpecimen from './components/TissueSpecimen.astro';
+import TissueViewer from './components/TissueViewer.astro';
+import LabReport from './components/LabReport.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tg">
+  <div class="tg-bench">
+    <div class="tg-bench-inner">
+      <div class="tg-grid"></div>
+
+      <div class="tg-layout">
+        <TissueSpecimen ui={ui} />
+        <TissueViewer />
+        <LabReport ui={ui} />
+      </div>
+    </div>
+  </div>
+</div>
+
+<script is:inline define:vars={{ ui }}>
+  const TISSUE = {
+    'red-meat': { base: '#b91c1c', dark: '#991b1b', fiber: '#fca5a5' },
+    'poultry': { base: '#d97706', dark: '#b45309', fiber: '#fde68a' },
+    'fish': { base: '#d6d3d1', dark: '#a8a29e', fiber: '#f5f5f4' },
+    'shellfish': { base: '#f97316', dark: '#ea580c', fiber: '#fed7aa' },
+  };
+  const RATIO_MAP = { 'red-meat': [0.0075, 0.01], 'poultry': [0.01, 0.012], 'fish': [0.012, 0.015], 'shellfish': [0.01, 0.015] };
+  const TEMP_RANGES = [
+    { min: 0, max: 5, hMin: 6, hMax: 24 },
+    { min: 5, max: 15, hMin: 3, hMax: 8 },
+    { min: 15, max: 25, hMin: 1, hMax: 4 },
+    { min: 25, max: 40, hMin: 0.5, hMax: 2 },
+  ];
+  const BOND_IDS = ['tg-bond-1','tg-bond-2','tg-bond-3','tg-bond-4','tg-bond-5'];
+  const NODE_IDS = ['tg-node-1a','tg-node-1b','tg-node-2a','tg-node-2b','tg-node-3a','tg-node-3b','tg-node-4a','tg-node-4b','tg-node-5a','tg-node-5b'];
+
+  const $ = (id) => document.getElementById(id);
+  const unitMetric = $('tg-unit-metric'), unitImperial = $('tg-unit-imperial');
+  const methodDry = $('tg-method-dry'), methodSlurry = $('tg-method-slurry');
+  const weightInput = $('tg-weight-input'), proteinSelect = $('tg-protein-select'), tempInput = $('tg-temp-input');
+  const weightUnit = $('tg-weight-unit'), tempUnit = $('tg-temp-unit');
+  const rTg=$('tg-r-tg'), rWater=$('tg-r-water'), rTotal=$('tg-r-total'), rRatio=$('tg-r-ratio');
+  const rIncMin=$('tg-r-inc-min'), rIncMax=$('tg-r-inc-max'), rWaterRow=$('tg-r-water-row');
+  const rIncubation=$('tg-r-incubation'), rAlert=$('tg-r-alert'), methodDesc=$('tg-method-desc');
+  const statusLabel=$('tg-status-label'), tempDisplay=$('tg-temp-display'), tempFill=$('tg-temp-fill');
+  const bondsFormed=$('tg-bonds-formed'), denaturedOverlay=$('tg-denatured-overlay'), methodLabel=$('tg-method-label');
+  const bondEls = BOND_IDS.map($), nodeEls = NODE_IDS.map($);
+  const particles = ['tg-particle-1','tg-particle-2','tg-particle-3','tg-particle-4'].map($);
+
+  let unit = 'metric', method = 'dry';
+  const KEY = 'cooking-tg-v3';
+
+  function cToF(c) { return c * 9/5 + 32; }
+  function fToC(f) { return (f - 32) * 5/9; }
+  function gToOz(g) { return g * 0.035274; }
+  function ozToG(oz) { return oz / 0.035274; }
+
+  function saveState() {
+    try { localStorage.setItem(KEY, JSON.stringify({ unit, method, weight: weightInput.value, protein: proteinSelect.value, temp: tempInput.value })); } catch {}
+  }
+
+  function loadState() {
+    try {
+      const data = localStorage.getItem(KEY);
+      if (!data) return;
+      const s = JSON.parse(data);
+      if (s.unit) unit = s.unit;
+      if (s.method) method = s.method;
+      if (s.weight) weightInput.value = s.weight;
+      if (s.protein) proteinSelect.value = s.protein;
+      if (s.temp) tempInput.value = s.temp;
+    } catch {}
+  }
+
+  function applyStateUI() {
+    if (unit === 'imperial') { unitImperial.classList.add('active'); unitMetric.classList.remove('active'); }
+    if (method === 'slurry') { methodSlurry.classList.add('active'); methodDry.classList.remove('active'); }
+  }
+
+  function updateUnits() {
+    weightUnit.textContent = unit === 'imperial' ? 'oz' : 'g';
+    tempUnit.textContent = unit === 'imperial' ? '°F' : '°C';
+    weightInput.setAttribute('max', unit === 'imperial' ? '1760' : '50000');
+    tempInput.setAttribute('max', unit === 'imperial' ? '176' : '80');
+  }
+
+  function getWeightGrams() {
+    const v = parseFloat(weightInput.value) || 0;
+    return unit === 'imperial' ? ozToG(v) : v;
+  }
+
+  function getTempCelsius() {
+    const v = parseFloat(tempInput.value) || 0;
+    return unit === 'imperial' ? fToC(v) : v;
+  }
+
+  function setDisplayWeight(g) {
+    weightInput.value = unit === 'imperial' ? gToOz(g).toFixed(1) : Math.round(g).toString();
+  }
+
+  function updateTissueColors(p) {
+    const c = TISSUE[p] || TISSUE['red-meat'];
+    const root = document.querySelector('.tg');
+    root.style.setProperty('--tg-tissue-a-current', c.base);
+    root.style.setProperty('--tg-tissue-b-current', c.dark);
+    root.style.setProperty('--tg-fiber-current', c.fiber);
+  }
+
+  function updateBonds(n) {
+    bondEls.forEach((b, i) => b.classList.toggle('active', i < n));
+    nodeEls.forEach((nd, i) => nd.classList.toggle('active', i < n * 2));
+    bondsFormed.textContent = Math.min(n, bondEls.length);
+  }
+
+  let particleInterval = null;
+
+  function startParticles() {
+    stopParticles();
+    const baseX = 188, baseY = [75, 115, 155, 195], targets = [85, 125, 160, 200];
+    let frame = 0;
+    particleInterval = setInterval(() => {
+      frame = (frame + 1) % 120;
+      particles.forEach((p, i) => {
+        const idx = (frame + i * 30) % 120;
+        if (idx >= 60) { p.setAttribute('opacity', '0'); return; }
+        const t = idx / 60;
+        p.setAttribute('cx', (baseX + t * 124).toString());
+        p.setAttribute('cy', (baseY[i] + t * (targets[i] - baseY[i])).toString());
+        p.setAttribute('opacity', (Math.sin(t * Math.PI) * 0.9).toString());
+        p.classList.add('active');
+      });
+    }, 25);
+  }
+
+  function stopParticles() {
+    if (particleInterval) { clearInterval(particleInterval); particleInterval = null; }
+    particles.forEach(p => { p.setAttribute('opacity', '0'); p.classList.remove('active'); });
+  }
+
+  function updateTempGauge(tempC) {
+    const display = unit === 'imperial' ? cToF(tempC) : tempC;
+    tempDisplay.textContent = display.toFixed(1) + (unit === 'imperial' ? '°F' : '°C');
+    const pct = Math.max(0, Math.min(100, (tempC / 60) * 100));
+    tempFill.style.height = pct + '%';
+    tempFill.classList.remove('warm', 'hot');
+    if (tempC >= 55) tempFill.classList.add('hot');
+    else if (tempC >= 35) tempFill.classList.add('warm');
+  }
+
+  function computeResult(meatWeightG, tempC, proteinType) {
+    if (tempC >= 60) return { enzymeDestroyed: true, tgGrams: 0, waterMl: 0, totalG: meatWeightG, ratioPct: 0, hMin: 0, hMax: 0 };
+
+    const ratios = RATIO_MAP[proteinType] || RATIO_MAP['red-meat'];
+    const midRatio = (ratios[0] + ratios[1]) / 2;
+    const tgGrams = parseFloat((meatWeightG * midRatio).toFixed(2));
+    const waterMl = method === 'slurry' ? parseFloat((tgGrams * 4).toFixed(1)) : 0;
+    const totalG = method === 'slurry'
+      ? parseFloat((meatWeightG + tgGrams + waterMl).toFixed(2))
+      : parseFloat((meatWeightG + tgGrams).toFixed(2));
+
+    let hMin = 6, hMax = 24;
+    for (const r of TEMP_RANGES) {
+      if (tempC >= r.min && tempC < r.max) { hMin = r.hMin; hMax = r.hMax; break; }
+    }
+    return { enzymeDestroyed: false, tgGrams, waterMl, totalG, ratioPct: parseFloat((midRatio * 100).toFixed(2)), hMin, hMax };
+  }
+
+  function renderDenatured(meatWeightG) {
+    rTg.textContent = rWater.textContent = '0';
+    rTotal.textContent = (unit === 'imperial' ? gToOz(meatWeightG) : meatWeightG).toFixed(2);
+    rRatio.textContent = rIncMin.textContent = rIncMax.textContent = '0';
+    rAlert.style.display = 'block'; rIncubation.style.display = 'none';
+    rWaterRow.style.display = method === 'slurry' ? 'flex' : 'none';
+    statusLabel.textContent = 'denatured'; statusLabel.style.color = '#dc2626';
+    denaturedOverlay.classList.add('active');
+    updateBonds(0); stopParticles();
+  }
+
+  function renderResult(r, meatWeightG) {
+    if (r.enzymeDestroyed) { renderDenatured(meatWeightG); return; }
+    denaturedOverlay.classList.remove('active');
+    statusLabel.textContent = 'incubating'; statusLabel.style.color = '';
+    rAlert.style.display = 'none'; rIncubation.style.display = 'block';
+    const f = unit === 'imperial' ? 0.035274 : 1;
+    rTg.textContent = (r.tgGrams * f).toFixed(2);
+    rTotal.textContent = (r.totalG * f).toFixed(2);
+    rRatio.textContent = r.ratioPct.toFixed(2);
+    rIncMin.textContent = r.hMin; rIncMax.textContent = r.hMax;
+    if (method === 'slurry') {
+      rWater.textContent = (r.waterMl * f).toFixed(1); rWaterRow.style.display = 'flex';
+      methodDesc.textContent = ui.slurryDesc;
+    } else {
+      rWater.textContent = '0'; rWaterRow.style.display = 'none';
+      methodDesc.textContent = ui.dryDustingDesc;
+    }
+    const n = Math.round(Math.min(1, meatWeightG / 4000) * 5);
+    updateBonds(n);
+    if (n > 0) startParticles(); else stopParticles();
+  }
+
+  function updateView() {
+    updateUnits();
+    methodLabel.textContent = method === 'dry' ? 'DRY DUSTING' : 'SLURRY BONDING';
+    const meatWeightG = getWeightGrams(), tempC = getTempCelsius(), proteinType = proteinSelect.value;
+    updateTissueColors(proteinType);
+    updateTempGauge(tempC);
+    renderResult(computeResult(meatWeightG, tempC, proteinType), meatWeightG);
+    saveState();
+  }
+
+  function switchUnit(to) {
+    if (unit === to) return;
+    const prevG = getWeightGrams(), prevC = getTempCelsius();
+    unit = to;
+    unitMetric.classList.toggle('active', to === 'metric');
+    unitImperial.classList.toggle('active', to === 'imperial');
+    setDisplayWeight(prevG);
+    tempInput.value = to === 'imperial' ? cToF(prevC).toFixed(1) : prevC.toFixed(1);
+    updateView();
+  }
+
+  function switchMethod(to) {
+    if (method === to) return;
+    method = to;
+    methodDry.classList.toggle('active', to === 'dry');
+    methodSlurry.classList.toggle('active', to === 'slurry');
+    updateView();
+  }
+
+  unitMetric.addEventListener('click', () => switchUnit('metric'));
+  unitImperial.addEventListener('click', () => switchUnit('imperial'));
+  methodDry.addEventListener('click', () => switchMethod('dry'));
+  methodSlurry.addEventListener('click', () => switchMethod('slurry'));
+  weightInput.addEventListener('input', updateView);
+  proteinSelect.addEventListener('change', updateView);
+  tempInput.addEventListener('input', updateView);
+
+  loadState();
+  applyStateUI();
+  updateUnits();
+  updateView();
+</script>

package/src/tool/meat-binder-transglutaminase-calculator/components/LabReport.astro

@@ -0,0 +1,59 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tg-report">
+  <div class="tg-report-header">
+    <div class="tg-report-dot"></div>
+    <span class="tg-report-label">Lab Report</span>
+  </div>
+  <div class="tg-report-body">
+    <div class="tg-measurement">
+      <span class="tg-measurement-label">{ui.tgAmount}</span>
+      <span class="tg-measurement-value">
+        <span id="tg-r-tg">7.50</span>
+        <span class="tg-unit">{ui.grams}</span>
+      </span>
+    </div>
+
+    <div id="tg-r-water-row" class="tg-measurement">
+      <span class="tg-measurement-label">{ui.waterAmount}</span>
+      <span class="tg-measurement-value">
+        <span id="tg-r-water">30.0</span>
+        <span class="tg-unit">{ui.milliliters}</span>
+      </span>
+    </div>
+
+    <div class="tg-measurement">
+      <span class="tg-measurement-label">{ui.totalWeight}</span>
+      <span class="tg-measurement-value">
+        <span id="tg-r-total">1037.50</span>
+        <span class="tg-unit">{ui.grams}</span>
+      </span>
+    </div>
+
+    <div class="tg-measurement">
+      <span class="tg-measurement-label">{ui.ratioLabel}</span>
+      <span class="tg-measurement-value">
+        <span id="tg-r-ratio">0.75</span>
+        <span class="tg-unit">%</span>
+      </span>
+    </div>
+
+    <div id="tg-r-incubation" class="tg-incubation-badge">
+      <div class="tg-incubation-badge-label">{ui.incubationLabel}</div>
+      <div class="tg-incubation-badge-value">
+        <span id="tg-r-inc-min">6</span> - <span id="tg-r-inc-max">24</span>
+        <span style="font-size: 0.55rem; color: var(--tg-ink-muted); margin-left: 0.15rem;">{ui.hours}</span>
+      </div>
+    </div>
+
+    <div id="tg-r-alert" class="tg-alert" style="display: none;">
+      <p class="tg-alert-text">{ui.enzymeDestroyed}</p>
+    </div>
+  </div>
+</div>

package/src/tool/meat-binder-transglutaminase-calculator/components/TissueSpecimen.astro

@@ -0,0 +1,67 @@
+---
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tg-specimen">
+  <div class="tg-specimen-header">
+    <div class="tg-specimen-dot"></div>
+    <span class="tg-specimen-label">Specimen Data</span>
+  </div>
+  <div class="tg-specimen-body">
+    <div class="tg-field">
+      <span class="tg-field-label">{ui.unitLabel}</span>
+      <div class="tg-toggle-group">
+        <button type="button" id="tg-unit-metric" class="tg-toggle active" data-unit="metric">
+          {ui.metricUnit}
+        </button>
+        <button type="button" id="tg-unit-imperial" class="tg-toggle" data-unit="imperial">
+          {ui.imperialUnit}
+        </button>
+      </div>
+    </div>
+
+    <div class="tg-field">
+      <span class="tg-field-label">{ui.methodLabel}</span>
+      <div class="tg-toggle-group">
+        <button type="button" id="tg-method-dry" class="tg-toggle active" data-method="dry">
+          {ui.dryMethod}
+        </button>
+        <button type="button" id="tg-method-slurry" class="tg-toggle" data-method="slurry">
+          {ui.slurryMethod}
+        </button>
+      </div>
+    </div>
+
+    <div class="tg-field">
+      <label for="tg-weight-input" class="tg-field-label">
+        {ui.weightLabel} (<span id="tg-weight-unit">g</span>)
+      </label>
+      <input type="number" id="tg-weight-input" min="0" max="50000" step="any" value="1000" class="tg-input" inputmode="decimal" />
+    </div>
+
+    <div class="tg-field">
+      <label for="tg-protein-select" class="tg-field-label">{ui.proteinLabel}</label>
+      <select id="tg-protein-select" class="tg-select">
+        <option value="red-meat">{ui.redMeat}</option>
+        <option value="poultry">{ui.poultry}</option>
+        <option value="fish">{ui.fish}</option>
+        <option value="shellfish">{ui.shellfish}</option>
+      </select>
+    </div>
+
+    <div class="tg-field">
+      <label for="tg-temp-input" class="tg-field-label">
+        {ui.tempLabel} (<span id="tg-temp-unit">°C</span>)
+      </label>
+      <input type="number" id="tg-temp-input" min="0" max="80" step="0.5" value="4" class="tg-input" inputmode="decimal" />
+    </div>
+  </div>
+
+  <div class="tg-annotation">
+    <p id="tg-method-desc" class="tg-annotation-text">{ui.dryDustingDesc}</p>
+  </div>
+</div>

package/src/tool/meat-binder-transglutaminase-calculator/components/TissueViewer.astro

@@ -0,0 +1,137 @@
+<div class="tg-visualizer">
+  <div class="tg-visualizer-header">
+    <span class="tg-visualizer-label">Tissue Cross-Linking</span>
+    <span id="tg-status-label" class="tg-visualizer-status">incubating / 4°C</span>
+  </div>
+  <div class="tg-visualizer-body">
+    <svg class="tg-visualizer-svg" viewBox="0 0 500 320" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="tg-shadow">
+          <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.15" />
+        </filter>
+        <filter id="tg-glow">
+          <feGaussianBlur stdDeviation="2.5" result="blur" />
+          <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
+        </filter>
+        <clipPath id="clip-a">
+          <path d="M 15 50 C 15 15, 75 20, 120 30 C 160 40, 185 60, 188 85 C 190 110, 182 135, 175 160 C 168 185, 155 205, 135 225 C 115 245, 85 260, 55 265 C 25 270, 15 255, 15 230 Z" />
+        </clipPath>
+        <clipPath id="clip-b">
+          <path d="M 485 55 C 485 20, 425 25, 380 35 C 340 45, 315 65, 312 90 C 310 115, 318 140, 325 165 C 332 190, 345 210, 365 230 C 385 250, 415 265, 445 270 C 475 275, 485 260, 485 235 Z" />
+        </clipPath>
+      </defs>
+
+      <g filter="url(#tg-shadow)">
+        <path id="tg-shape-a" d="M 15 50 C 15 15, 75 20, 120 30 C 160 40, 185 60, 188 85 C 190 110, 182 135, 175 160 C 168 185, 155 205, 135 225 C 115 245, 85 260, 55 265 C 25 270, 15 255, 15 230 Z" class="tg-tissue-a" />
+      </g>
+
+      <g clip-path="url(#clip-a)" id="tg-fibers-a">
+        <path d="M 25 65 Q 60 60, 100 70 T 180 75" stroke-width="1.2" />
+        <path d="M 20 95 Q 55 90, 95 100 T 185 105" stroke-width="1.2" />
+        <path d="M 25 125 Q 65 120, 105 130 T 180 135" stroke-width="1.2" />
+        <path d="M 20 155 Q 60 150, 100 160 T 185 165" stroke-width="1.2" />
+        <path d="M 25 185 Q 65 180, 105 190 T 175 195" stroke-width="1.2" />
+        <path d="M 20 215 Q 55 210, 95 220 T 165 225" stroke-width="1.2" />
+        <path d="M 25 245 Q 55 240, 85 250 T 130 255" stroke-width="1.2" />
+        <line x1="60" y1="63" x2="60" y2="78" stroke-width="0.6" opacity="0.4" />
+        <line x1="60" y1="93" x2="60" y2="108" stroke-width="0.6" opacity="0.4" />
+        <line x1="60" y1="123" x2="60" y2="138" stroke-width="0.6" opacity="0.4" />
+        <line x1="60" y1="153" x2="60" y2="168" stroke-width="0.6" opacity="0.4" />
+        <line x1="60" y1="183" x2="60" y2="198" stroke-width="0.6" opacity="0.4" />
+        <line x1="60" y1="213" x2="60" y2="228" stroke-width="0.6" opacity="0.4" />
+        <line x1="110" y1="63" x2="110" y2="78" stroke-width="0.6" opacity="0.4" />
+        <line x1="110" y1="93" x2="110" y2="108" stroke-width="0.6" opacity="0.4" />
+        <line x1="110" y1="123" x2="110" y2="138" stroke-width="0.6" opacity="0.4" />
+        <line x1="110" y1="153" x2="110" y2="168" stroke-width="0.6" opacity="0.4" />
+        <line x1="110" y1="183" x2="110" y2="198" stroke-width="0.6" opacity="0.4" />
+        <line x1="110" y1="213" x2="110" y2="228" stroke-width="0.6" opacity="0.4" />
+        <line x1="150" y1="63" x2="150" y2="78" stroke-width="0.6" opacity="0.4" />
+        <line x1="150" y1="93" x2="150" y2="108" stroke-width="0.6" opacity="0.4" />
+        <line x1="150" y1="123" x2="150" y2="138" stroke-width="0.6" opacity="0.4" />
+        <line x1="150" y1="183" x2="150" y2="198" stroke-width="0.6" opacity="0.4" />
+      </g>
+
+      <g filter="url(#tg-shadow)">
+        <path id="tg-shape-b" d="M 485 55 C 485 20, 425 25, 380 35 C 340 45, 315 65, 312 90 C 310 115, 318 140, 325 165 C 332 190, 345 210, 365 230 C 385 250, 415 265, 445 270 C 475 275, 485 260, 485 235 Z" class="tg-tissue-b" />
+      </g>
+
+      <g clip-path="url(#clip-b)" id="tg-fibers-b">
+        <path d="M 475 70 Q 440 65, 400 75 T 320 80" stroke-width="1.2" />
+        <path d="M 480 100 Q 445 95, 405 105 T 315 110" stroke-width="1.2" />
+        <path d="M 475 130 Q 435 125, 395 135 T 320 140" stroke-width="1.2" />
+        <path d="M 480 160 Q 440 155, 400 165 T 315 170" stroke-width="1.2" />
+        <path d="M 475 190 Q 435 185, 395 195 T 325 200" stroke-width="1.2" />
+        <path d="M 480 220 Q 445 215, 405 225 T 335 230" stroke-width="1.2" />
+        <path d="M 475 250 Q 445 245, 415 255 T 370 260" stroke-width="1.2" />
+        <line x1="440" y1="68" x2="440" y2="83" stroke-width="0.6" opacity="0.4" />
+        <line x1="440" y1="98" x2="440" y2="113" stroke-width="0.6" opacity="0.4" />
+        <line x1="440" y1="128" x2="440" y2="143" stroke-width="0.6" opacity="0.4" />
+        <line x1="440" y1="158" x2="440" y2="173" stroke-width="0.6" opacity="0.4" />
+        <line x1="440" y1="188" x2="440" y2="203" stroke-width="0.6" opacity="0.4" />
+        <line x1="440" y1="218" x2="440" y2="233" stroke-width="0.6" opacity="0.4" />
+        <line x1="390" y1="68" x2="390" y2="83" stroke-width="0.6" opacity="0.4" />
+        <line x1="390" y1="98" x2="390" y2="113" stroke-width="0.6" opacity="0.4" />
+        <line x1="390" y1="128" x2="390" y2="143" stroke-width="0.6" opacity="0.4" />
+        <line x1="390" y1="158" x2="390" y2="173" stroke-width="0.6" opacity="0.4" />
+        <line x1="390" y1="188" x2="390" y2="203" stroke-width="0.6" opacity="0.4" />
+        <line x1="390" y1="218" x2="390" y2="233" stroke-width="0.6" opacity="0.4" />
+        <line x1="350" y1="68" x2="350" y2="83" stroke-width="0.6" opacity="0.4" />
+        <line x1="350" y1="98" x2="350" y2="113" stroke-width="0.6" opacity="0.4" />
+        <line x1="350" y1="128" x2="350" y2="143" stroke-width="0.6" opacity="0.4" />
+        <line x1="350" y1="188" x2="350" y2="203" stroke-width="0.6" opacity="0.4" />
+      </g>
+
+      <rect id="tg-denatured-overlay" x="0" y="0" width="500" height="320" class="tg-denatured-overlay" />
+
+      <g id="tg-bonds">
+        <line x1="188" y1="75" x2="312" y2="85" id="tg-bond-1" class="tg-bond-line" stroke-width="2" />
+        <line x1="185" y1="115" x2="315" y2="125" id="tg-bond-2" class="tg-bond-line" stroke-width="2" />
+        <line x1="188" y1="155" x2="312" y2="160" id="tg-bond-3" class="tg-bond-line" stroke-width="2" />
+        <line x1="182" y1="195" x2="318" y2="200" id="tg-bond-4" class="tg-bond-line" stroke-width="2" />
+        <line x1="175" y1="235" x2="325" y2="230" id="tg-bond-5" class="tg-bond-line" stroke-width="2" />
+      </g>
+
+      <g id="tg-nodes">
+        <circle cx="188" cy="75" r="4" id="tg-node-1a" class="tg-bond-node" />
+        <circle cx="312" cy="85" r="4" id="tg-node-1b" class="tg-bond-node" />
+        <circle cx="185" cy="115" r="4" id="tg-node-2a" class="tg-bond-node" />
+        <circle cx="315" cy="125" r="4" id="tg-node-2b" class="tg-bond-node" />
+        <circle cx="188" cy="155" r="4" id="tg-node-3a" class="tg-bond-node" />
+        <circle cx="312" cy="160" r="4" id="tg-node-3b" class="tg-bond-node" />
+        <circle cx="182" cy="195" r="4" id="tg-node-4a" class="tg-bond-node" />
+        <circle cx="318" cy="200" r="4" id="tg-node-4b" class="tg-bond-node" />
+        <circle cx="175" cy="235" r="4" id="tg-node-5a" class="tg-bond-node" />
+        <circle cx="325" cy="230" r="4" id="tg-node-5b" class="tg-bond-node" />
+      </g>
+
+      <g id="tg-particles">
+        <circle id="tg-particle-1" cx="0" cy="0" r="4" class="tg-particle" filter="url(#tg-glow)" />
+        <circle id="tg-particle-2" cx="0" cy="0" r="4" class="tg-particle" filter="url(#tg-glow)" />
+        <circle id="tg-particle-3" cx="0" cy="0" r="4" class="tg-particle" filter="url(#tg-glow)" />
+        <circle id="tg-particle-4" cx="0" cy="0" r="4" class="tg-particle" filter="url(#tg-glow)" />
+      </g>
+
+      <text id="tg-method-label" x="250" y="20" text-anchor="middle" fill="var(--tg-ink-faint)" font-size="8" letter-spacing="0.15em" font-weight="600">DRY DUSTING</text>
+      <line x1="195" y1="28" x2="305" y2="28" stroke="var(--tg-ink-faint)" stroke-width="0.5" />
+      <line x1="195" y1="25" x2="195" y2="31" stroke="var(--tg-ink-faint)" stroke-width="0.5" />
+      <line x1="305" y1="25" x2="305" y2="31" stroke="var(--tg-ink-faint)" stroke-width="0.5" />
+
+      <text x="250" y="303" text-anchor="middle" fill="var(--tg-ink-faint)" font-size="8" letter-spacing="0.08em">
+        <tspan id="tg-bonds-formed">0</tspan>
+        <tspan> / 5 covalent bonds formed</tspan>
+      </text>
+    </svg>
+
+    <div class="tg-temp-bar">
+      <div class="tg-temp-bar-label">TEMP</div>
+      <div class="tg-temp-bar-track">
+        <div id="tg-temp-fill" class="tg-temp-bar-fill" style="height: 14%; bottom: 0;"></div>
+        <div class="tg-temp-bar-tick" style="bottom: 0%;"><span>0°C</span></div>
+        <div class="tg-temp-bar-tick" style="bottom: 33%;"><span>20°C</span></div>
+        <div class="tg-temp-bar-tick" style="bottom: 67%;"><span>40°C</span></div>
+        <div class="tg-temp-bar-tick" style="bottom: 100%;"><span>60°C</span></div>
+      </div>
+      <div id="tg-temp-display" class="tg-temp-bar-value">4°C</div>
+    </div>
+  </div>
+</div>