@jjlmoya/utils-science 1.20.0 → 1.21.0

package/src/tool/cellular-renewal/i18n/ru.ts

@@ -1,6 +1,6 @@
 const slug = 'kalkulyator-obnovleniya-kletok';
 const description = 'Рассчитайте процент вашего тела, который обновился с момента рождения. Оценки основаны на скорости деления клеток органов, костей и тканей. Парадокс Тесея, ставший осязаемым.';
-const title = 'Калькулятор обновления клеток: сколько осталось от оригинального «вас»?';
+const title = 'Калькулятор обновления клеток: сколько осталось от оригинального "вас"?';
 const howTo = [
     {
       name: 'Укажите свой возраст',
@@ -8,7 +8,7 @@ const howTo = [
     },
     {
       name: 'Посмотрите на основной процент',
-      text: 'Большое число в центре показывает, какой процент вашей текущей материи является «новым» (обновленным с момента рождения).',
+      text: 'Большое число в центре показывает, какой процент вашей текущей материи является "новым" (обновленным с момента рождения).',
     },
     {
       name: 'Изучите графики прогресса',
@@ -16,25 +16,25 @@ const howTo = [
     },
     {
       name: 'Задумайтесь о своей идентичности',
-      text: 'Если 99% вас — это новая материя, то кто вы на самом деле? Используйте этот инструмент как отправную точку для размышлений о преемственности личности и парадоксе Тесея.',
+      text: 'Если 99% вас - это новая материя, то кто вы на самом деле? Используйте этот инструмент как отправную точку для размышлений о преемственности личности и парадоксе Тесея.',
     },
   ];
 const faq = [
     {
-      question: 'Что именно представляет собой «обновление клеток»?',
+      question: 'Что именно представляет собой "обновление клеток"?',
       answer: 'Это естественный процесс, при котором состарившиеся или поврежденные клетки умирают (апоптоз) и заменяются новыми клетками, образующимися в результате митотического деления. Этот цикл необходим для поддержания функциональности тканей и заживления повреждений.',
     },
     {
       question: 'Почему мозг обновляется так медленно?',
-      answer: 'Нейроны в коре головного мозга образуются до рождения и, как правило, больше не делятся. Это обеспечивает неврологическую стабильность: ваша фундаментальная «проводка» остается неизменной. Однако глиальные (вспомогательные) клетки обновляются. Память хранится в связях, а не в атомах.',
+      answer: 'Нейроны в коре головного мозга образуются до рождения и, как правило, больше не делятся. Это обеспечивает неврологическую стабильность: ваша фундаментальная "проводка" остается неизменной. Однако глиальные (вспомогательные) клетки обновляются. Память хранится в связях, а не в атомах.',
     },
     {
-      question: 'Правда ли, что каждые 7 лет мы становимся «новыми людьми»?',
-      answer: 'Это упрощение, которое не совсем точно. Ваша кровь обновляется за 4 месяца, кожа — за месяц, скелет — за 10 лет. Ваш мозг остается практически неизменным. Число 7 лет является скорее историческим мифом (об этом упоминал еще Аристотель), но биологически это неточное среднее значение.',
+      question: 'Правда ли, что каждые 7 лет мы становимся "новыми людьми"?',
+      answer: 'Это упрощение, которое не совсем точно. Ваша кровь обновляется за 4 месяца, кожа - за месяц, скелет - за 10 лет. Ваш мозг остается практически неизменным. Число 7 лет является скорее историческим мифом (об этом упоминал еще Аристотель), но биологически это неточное среднее значение.',
     },
     {
       question: 'Если мое тело на 99% новое, я все еще тот же человек?',
-      answer: 'Да. Идентичность — это преемственность информации, сознания и памяти, а не атомов. Вы подобны реке: вода постоянно меняется, но река остается прежней. Парадокс Тесея предполагает, что идентичность заключается в паттерне, а не в материи.',
+      answer: 'Да. Идентичность - это преемственность информации, сознания и памяти, а не атомов. Вы подобны реке: вода постоянно меняется, но река остается прежней. Парадокс Тесея предполагает, что идентичность заключается в паттерне, а не в материи.',
     },
     {
       question: 'Какие ткани обновляются быстрее всего?',
@@ -65,21 +65,21 @@ export const content: ToolLocaleContent = {
     boneRemodeling: 'Перестройка костей',
     organicMatrix: 'Органическая матрица',
     perennialCells: 'Вечные клетки',
-    disclaimerText: 'Расчеты основаны на средней продолжительности жизни клеток согласно изотопным исследованиям. В то время как кровь и кожа обновляются за недели, белки хрусталика глаза и большая часть коры головного мозга остаются с вами со времен эмбрионального развития. Физически вы — динамическая структура в постоянном потоке.',
+    disclaimerText: 'Расчеты основаны на средней продолжительности жизни клеток согласно изотопным исследованиям. В то время как кровь и кожа обновляются за недели, белки хрусталика глаза и большая часть коры головного мозга остаются с вами со времен эмбрионального развития. Физически вы - динамическая структура в постоянном потоке.',
   },
   seo: [
     {
       type: 'title',
-      text: 'Сколько в вас действительно «вашего»? Наука об обновлении клеток',
+      text: 'Сколько в вас действительно "вашего"? Наука об обновлении клеток',
       level: 2,
     },
     {
       type: 'paragraph',
-      html: 'Ваше тело — это река в постоянном движении. Каждую секунду миллионы клеток умирают и заменяются новыми. За семь лет практически каждый атом в вашем теле будет заменен. Однако эта статистика глубоко вводит в заблуждение, потому что разные части вашего организма обновляются с радикально разной скоростью.',
+      html: 'Ваше тело - это река в постоянном движении. Каждую секунду миллионы клеток умирают и заменяются новыми. За семь лет практически каждый атом в вашем теле будет заменен. Однако эта статистика глубоко вводит в заблуждение, потому что разные части вашего организма обновляются с радикально разной скоростью.',
     },
     {
       type: 'paragraph',
-      html: 'Этот парадокс, известный как <strong>Парадокс корабля Тесея</strong>, ставит древний вопрос: если заменить все части чего-либо, останется ли оно прежним? В вашем случае это буквальный вопрос. Атомы, из которых сегодня состоит ваше тело, — не те же самые, что были там 10 лет назад, но <em>вы</em> все еще вы.',
+      html: 'Этот парадокс, известный как <strong>Парадокс корабля Тесея</strong>, ставит древний вопрос: если заменить все части чего-либо, останется ли оно прежним? В вашем случае это буквальный вопрос. Атомы, из которых сегодня состоит ваше тело, - не те же самые, что были там 10 лет назад, но <em>вы</em> все еще вы.',
     },
     {
       type: 'title',
@@ -94,10 +94,10 @@ export const content: ToolLocaleContent = {
       type: 'table',
       headers: ['Ткань', 'Средняя жизнь клеток', 'Полное обновление', 'Описание'],
       rows: [
-        ['<strong>Кровь</strong>', '120 дней', '4 месяца', 'Эритроциты — рекордсмены скорости. Ваш костный мозг производит 200 миллиардов клеток ежедневно.'],
+        ['<strong>Кровь</strong>', '120 дней', '4 месяца', 'Эритроциты - рекордсмены скорости. Ваш костный мозг производит 200 миллиардов клеток ежедневно.'],
         ['<strong>Кожа</strong>', '2-4 недели', '1 месяц', 'Чрезвычайно быстрое обновление. Вы теряете около 30 000 клеток кожи в минуту.'],
         ['<strong>Кости</strong>', '10 лет', 'Десятилетие', 'Скелет более консервативен. Тем не менее, через 10 лет вы практически полностью обновите свой скелет.'],
-        ['<strong>Органы</strong>', '15 лет', '1,5 десятилетия', 'Печень обновляется за месяцы. Сердце — за годы. Мозаика ритмов.'],
+        ['<strong>Органы</strong>', '15 лет', '1,5 десятилетия', 'Печень обновляется за месяцы. Сердце - за годы. Мозаика ритмов.'],
         ['<strong>Мозг</strong>', '80+ лет (нейроны)', 'Почти никогда', 'Ваши корковые нейроны с вами с рождения. Но глия (вспомогательные клетки) обновляется.'],
       ],
     },
@@ -134,16 +134,16 @@ export const content: ToolLocaleContent = {
     },
     {
       type: 'title',
-      text: 'Философские выводы: идентичность — это информация, а не материя',
+      text: 'Философские выводы: идентичность - это информация, а не материя',
       level: 3,
     },
     {
       type: 'paragraph',
-      html: 'Если ваше тело полностью обновляется каждое десятилетие, почему это все еще «вы»? Ответ заключается в том, что идентичность заключается не в конкретных атомах, а в <strong>информационном паттерне</strong>, который эти атомы удерживают. Вы подобны песне: вибрирует не тот же самый воздух, но мелодия сохраняется.',
+      html: 'Если ваше тело полностью обновляется каждое десятилетие, почему это все еще "вы"? Ответ заключается в том, что идентичность заключается не в конкретных атомах, а в <strong>информационном паттерне</strong>, который эти атомы удерживают. Вы подобны песне: вибрирует не тот же самый воздух, но мелодия сохраняется.',
     },
     {
       type: 'paragraph',
-      html: 'Это имеет глубокие последствия: ваше тело — это процесс, а не вещь. Вы — самоорганизующийся паттерн, который сохраняется в изменениях. Вы не владеете атомами; вы — структура, которая временно направляет их.',
+      html: 'Это имеет глубокие последствия: ваше тело - это процесс, а не вещь. Вы - самоорганизующийся паттерн, который сохраняется в изменениях. Вы не владеете атомами; вы - структура, которая временно направляет их.',
     },
   ],
   faq,

package/src/tool/cellular-renewal/i18n/zh.ts

@@ -1,6 +1,6 @@
 const slug = 'cellular-renewal-calculator';
-const description = '计算自出生以来你身体更新的百分比。基于器官、骨骼和组织的细胞分裂率进行估算。让“忒修斯之船”悖论变得触手可及。';
-const title = '细胞更新计算器：最初的“你”还剩下多少？';
+const description = '计算自出生以来你身体更新的百分比。基于器官、骨骼和组织的细胞分裂率进行估算。让"忒修斯之船"悖论变得触手可及。';
+const title = '细胞更新计算器：最初的"你"还剩下多少？';
 const howTo = [
     {
       name: '调整你的年龄',
@@ -8,7 +8,7 @@ const howTo = [
     },
     {
       name: '观察核心百分比',
-      text: '中间的大数字显示了你当前物质中有多少百分比是“新的”（自出生以来更新的部分）。',
+      text: '中间的大数字显示了你当前物质中有多少百分比是"新的"（自出生以来更新的部分）。',
     },
     {
       name: '分析进度条',
@@ -21,20 +21,20 @@ const howTo = [
   ];
 const faq = [
     {
-      question: '到底什么是“细胞更新”？',
+      question: '到底什么是"细胞更新"？',
       answer: '这是一种自然过程，衰老或受损的细胞通过凋亡死亡，并由通过有丝分裂产生的新细胞取代。这个过程对于维持组织功能和修复损伤至关重要。',
     },
     {
       question: '为什么大脑更新如此缓慢？',
-      answer: '大脑皮层的神经元产生于出生前，通常不会再分裂。这提供了神经系统的稳定性：你的基本“布线”保持不变。然而，神经胶质（支持）细胞确实会更新。记忆存储在连接中，而非原子中。',
+      answer: '大脑皮层的神经元产生于出生前，通常不会再分裂。这提供了神经系统的稳定性：你的基本"布线"保持不变。然而，神经胶质（支持）细胞确实会更新。记忆存储在连接中，而非原子中。',
     },
     {
-      question: '每 7 年我们就变成“全新的人”是真的吗？',
+      question: '每 7 年我们就变成"全新的人"是真的吗？',
       answer: '这是一种简化，并不准确。你的血液在 4 个月内更新，皮肤在一个月内，骨架在 10 年内。你的大脑基本保持不变。7 年这个数字具有历史意义（亚里士多德提到过），但在生物学上是一个不精确的平均值。',
     },
     {
       question: '如果我的身体 99% 是新的，我依然是同一个人吗？',
-      answer: '是的。身份是信息、意识和记忆的连续性，而非原子的连续性。你如同一条河：水流不断更替，但河依然是那条河。“忒修斯之船”悖论表明，身份存在于模式中，而非物质中。',
+      answer: '是的。身份是信息、意识和记忆的连续性，而非原子的连续性。你如同一条河：水流不断更替，但河依然是那条河。"忒修斯之船"悖论表明，身份存在于模式中，而非物质中。',
     },
     {
       question: '哪些组织更新最快？',
@@ -70,7 +70,7 @@ export const content: ToolLocaleContent = {
   seo: [
     {
       type: 'title',
-      text: '你身体里有多少东西真正属于“你”？细胞更新的科学',
+      text: '你身体里有多少东西真正属于"你"？细胞更新的科学',
       level: 2,
     },
     {
@@ -139,7 +139,7 @@ export const content: ToolLocaleContent = {
     },
     {
       type: 'paragraph',
-      html: '如果你的身体每十年都是全新的，为什么它还是“你”？答案是身份不在于特定的原子，而在于这些原子所承载的<strong>信息模式</strong>。你就如同一首歌：振动的空气已不相同，但旋律依然存在。',
+      html: '如果你的身体每十年都是全新的，为什么它还是"你"？答案是身份不在于特定的原子，而在于这些原子所承载的<strong>信息模式</strong>。你就如同一首歌：振动的空气已不相同，但旋律依然存在。',
     },
     {
       type: 'paragraph',

package/src/tool/cellular-renewal/index.ts

@@ -1,4 +1,5 @@
 import { cellularRenewal } from './entry';
+import type { ToolDefinition } from '../../types';
 export * from './entry';
 export const CELLULAR_RENEWAL_TOOL: ToolDefinition = {
   entry: cellularRenewal,

package/src/tool/colony-counter/bibliography.astro

@@ -1,5 +1,5 @@
 ---
-import { Bibliography } from '@jjlmoya/utils-shared';
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
 import { colonyCounter } from './index';
 import type { KnownLocale } from '../../types';
 
@@ -11,4 +11,4 @@ const { locale = 'es' } = Astro.props;
 const content = await colonyCounter.i18n[locale]?.();
 ---
 
-{content && <Bibliography links={content.bibliography} />}
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/colony-counter/i18n/ru.ts

@@ -19,7 +19,7 @@ const howTo = [
 const faq = [
     {
       question: 'Что такое подсчет КОЕ?',
-      answer: 'Колониеобразующие единицы (КОЕ) — это показатель, позволяющий оценить количество жизнеспособных бактерий или грибков в образце. Предполагается, что каждая видимая колония выросла из одной клетки или группы клеток.',
+      answer: 'Колониеобразующие единицы (КОЕ) - это показатель, позволяющий оценить количество жизнеспособных бактерий или грибков в образце. Предполагается, что каждая видимая колония выросла из одной клетки или группы клеток.',
     },
     {
       question: 'Почему цифровой счетчик лучше ручного подсчета?',
@@ -30,8 +30,8 @@ const faq = [
       answer: 'Количество подсчитанных колоний умножается на обратный коэффициент разведения. Например, если вы насчитали 30 колоний при разведении 1:100, исходный образец содержит 3000 КОЕ/мл.',
     },
     {
-      question: 'Когда чашка считается «неподлежащей подсчету»?',
-      answer: 'В стандартной микробиологии, если на чашке более 250–300 колоний, она считается слишком плотно заселенной (TNTC — Too Numerous To Count), и данные считаются ненадежными из-за конкуренции между колониями.',
+      question: 'Когда чашка считается "неподлежащей подсчету"?',
+      answer: 'В стандартной микробиологии, если на чашке более 250-300 колоний, она считается слишком плотно заселенной (TNTC - Too Numerous To Count), и данные считаются ненадежными из-за конкуренции между колониями.',
     },
   ];
 import { bibliography } from '../bibliography';
@@ -68,7 +68,7 @@ export const content: ToolLocaleContent = {
     },
     {
       type: 'paragraph',
-      html: 'Подсчет колоний бактерий в чашках Петри — это фундаментальный метод микробиологии. Традиционно выполняемый с помощью ручного счетчика и маркера, он часто приводит к ошибкам, когда исследователь сбивается со счета или отмечает одну и ту же колонию дважды. Этот цифровой инструмент исключает такие ошибки и позволяет визуально различать типы колоний.',
+      html: 'Подсчет колоний бактерий в чашках Петри - это фундаментальный метод микробиологии. Традиционно выполняемый с помощью ручного счетчика и маркера, он часто приводит к ошибкам, когда исследователь сбивается со счета или отмечает одну и ту же колонию дважды. Этот цифровой инструмент исключает такие ошибки и позволяет визуально различать типы колоний.',
     },
     {
       type: 'title',
@@ -113,7 +113,7 @@ export const content: ToolLocaleContent = {
     },
     {
       type: 'paragraph',
-      html: 'Идеальный диапазон для ручного подсчета составляет от <strong>30 до 300 колоний</strong> на чашку. Если колоний менее 30, статистическая погрешность слишком велика. Если более 300 — колонии начинают сливаться, и их индивидуальное различение становится невозможным.',
+      html: 'Идеальный диапазон для ручного подсчета составляет от <strong>30 до 300 колоний</strong> на чашку. Если колоний менее 30, статистическая погрешность слишком велика. Если более 300 - колонии начинают сливаться, и их индивидуальное различение становится невозможным.',
     },
     {
       type: 'title',

package/src/tool/colony-counter/i18n/zh.ts

@@ -23,14 +23,14 @@ const faq = [
     },
     {
       question: '为什么数字计数器比手动计数更好？',
-      answer: '数字计数避免了在视觉标记菌落过程中“跟丢进度”的人为错误。此外，我们的工具允许按颜色区分菌落类型，从而简化了混合培养皿的分析。',
+      answer: '数字计数避免了在视觉标记菌落过程中"跟丢进度"的人为错误。此外，我们的工具允许按颜色区分菌落类型，从而简化了混合培养皿的分析。',
     },
     {
       question: '如何计算每毫升的 CFU？',
       answer: '将计得的菌落数乘以稀释倍数。例如，如果您在 1:100 稀释液中数得 30 个菌落，则原始样品含有 3000 CFU/ml。',
     },
     {
-      question: '什么时候培养皿被认为是“不可计数的”？',
+      question: '什么时候培养皿被认为是"不可计数的"？',
       answer: '在标准微生物学中，如果菌落超过 250-300 个，则认为培养皿过于拥挤（多不可计，TNTC），且由于菌落竞争，数据不可靠。',
     },
   ];

package/src/tool/colony-counter/index.ts

@@ -1,4 +1,5 @@
 import { colonyCounter } from './entry';
+import type { ToolDefinition } from '../../types';
 export * from './entry';
 export const COLONY_COUNTER_TOOL: ToolDefinition = {
   entry: colonyCounter,

package/src/tool/cosmic-inflation/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { cosmicInflation } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await cosmicInflation.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/cosmic-inflation/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Inflationary universe: A possible solution to the horizon and flatness problems',
+    url: 'https://journals.aps.org/prd/abstract/10.1103/PhysRevD.23.347',
+  },
+  {
+    name: 'A new inflationary universe scenario: A possible solution of the horizon, flatness, homogeneity, isotropy and primordial monopole problems',
+    url: 'https://www.sciencedirect.com/science/article/pii/0370269382912199',
+  },
+];

package/src/tool/cosmic-inflation/component.astro

@@ -0,0 +1,270 @@
+---
+import './cosmic-inflation-calculator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="cosmic-calculator-root" id="cosmic-inflation-root">
+  <div class="cosmic-presets">
+    <button class="cosmic-preset-btn active" data-efolds="60" data-energy="16">{ui.presetGuth}</button>
+    <button class="cosmic-preset-btn" data-efolds="70" data-energy="15">{ui.presetChaotic}</button>
+    <button class="cosmic-preset-btn" data-efolds="110" data-energy="18">{ui.presetExtreme}</button>
+  </div>
+
+  <div class="cosmic-controls-section">
+    <div class="cosmic-input-group">
+      <div class="cosmic-input-header">
+        <label for="cosmic-efolds">{ui.efoldsLabel}</label>
+        <span id="cosmic-efolds-val" class="cosmic-input-val">60</span>
+      </div>
+      <input type="range" id="cosmic-efolds" class="cosmic-slider" min="10" max="120" value="60" step="1" />
+      <span class="cosmic-tooltip">{ui.efoldsTooltip}</span>
+    </div>
+
+    <div class="cosmic-input-group">
+      <div class="cosmic-input-header">
+        <label for="cosmic-energy">{ui.energyLabel}</label>
+        <span id="cosmic-energy-val" class="cosmic-input-val">10^16</span>
+      </div>
+      <input type="range" id="cosmic-energy" class="cosmic-slider" min="10" max="19" value="16" step="1" />
+      <span class="cosmic-tooltip">{ui.energyTooltip}</span>
+    </div>
+  </div>
+
+  <div class="cosmic-chart-section">
+    <h3>{ui.chartTitle}</h3>
+    <div class="cosmic-canvas-container">
+      <canvas id="cosmic-chart-canvas"></canvas>
+    </div>
+  </div>
+
+  <div class="cosmic-results-section">
+    <div class="cosmic-result-block">
+      <span class="cosmic-result-label">{ui.scaleFactorResult}</span>
+      <span id="cosmic-scale-factor" class="cosmic-result-number">---</span>
+      <span class="cosmic-tooltip">{ui.scaleFactorTooltip}</span>
+      <span id="cosmic-analogy-text" class="cosmic-analogy"></span>
+    </div>
+
+    <div class="cosmic-divider-line"></div>
+
+    <div class="cosmic-result-block">
+      <span class="cosmic-result-label">{ui.reheatingTempResult}</span>
+      <span id="cosmic-reheating" class="cosmic-result-number">---</span>
+      <span class="cosmic-tooltip">{ui.reheatingTooltip}</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { CosmicInflationEngine } from './logic/CosmicInflationEngine';
+
+  const root = document.getElementById('cosmic-inflation-root');
+  if (root) {
+    const efoldsInput = document.getElementById('cosmic-efolds') as HTMLInputElement;
+    const energyInput = document.getElementById('cosmic-energy') as HTMLInputElement;
+    const efoldsVal = document.getElementById('cosmic-efolds-val');
+    const energyVal = document.getElementById('cosmic-energy-val');
+    const scaleFactorVal = document.getElementById('cosmic-scale-factor');
+    const reheatingVal = document.getElementById('cosmic-reheating');
+    const analogyText = document.getElementById('cosmic-analogy-text');
+    const canvas = document.getElementById('cosmic-chart-canvas') as HTMLCanvasElement;
+    const presetBtns = document.querySelectorAll('.cosmic-preset-btn');
+
+    const engine = new CosmicInflationEngine();
+
+    const analogyInsuff = 'Moderate inflation. This expansion is <span class="highlight">insufficient</span> to solve the horizon problem.';
+    const analogyProton = 'The universe expanded from the size of a <span class="highlight">proton</span> to the size of a <span class="highlight">galaxy</span> in a fraction of a second.';
+    const analogyObservable = 'The universe expanded from a <span class="highlight">subatomic scale</span> to larger than the <span class="highlight">observable universe</span> in 10^-32 seconds.';
+
+    function updateSliderFill(slider: HTMLInputElement) {
+      const min = parseFloat(slider.min) || 0;
+      const max = parseFloat(slider.max) || 100;
+      const val = parseFloat(slider.value) || 0;
+      const percentage = ((val - min) / (max - min)) * 100;
+      slider.style.background = `linear-gradient(to right, var(--cosmic-highlight) 0%, var(--cosmic-highlight) ${percentage}%, var(--cosmic-input-border) ${percentage}%, var(--cosmic-input-border) 100%)`;
+    }
+
+    function renderAnalogy(efolds: number) {
+      if (!analogyText) return;
+      if (efolds >= 60) {
+        analogyText.innerHTML = analogyObservable;
+      } else if (efolds >= 30) {
+        analogyText.innerHTML = analogyProton;
+      } else {
+        analogyText.innerHTML = analogyInsuff;
+      }
+    }
+
+    function update() {
+      const efolds = parseFloat(efoldsInput.value) || 60;
+      const energyPower = parseFloat(energyInput.value) || 16;
+      const energy = Math.pow(10, energyPower);
+
+      if (efoldsVal) efoldsVal.textContent = efolds.toString();
+      if (energyVal) energyVal.textContent = `10^${energyPower}`;
+
+      updateSliderFill(efoldsInput);
+      updateSliderFill(energyInput);
+
+      const result = engine.calculate(efolds, energy);
+
+      if (scaleFactorVal) {
+        scaleFactorVal.textContent = formatCosmicNumber(result.scaleFactorRatio);
+      }
+      if (reheatingVal) {
+        reheatingVal.textContent = formatCosmicNumber(result.reheatingTemperature);
+      }
+
+      renderAnalogy(efolds);
+      drawSpaceTime(efolds);
+    }
+
+    function formatCosmicNumber(val: number): string {
+      if (val >= 1e6 || val <= 1e-4) {
+        const str = val.toExponential(2);
+        return str.replace('e+', ' × 10^').replace('e-', ' × 10^-');
+      }
+      return val.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    }    interface DrawingContext {
+      ctx: CanvasRenderingContext2D;
+      w: number;
+      h: number;
+      centerX: number;
+      centerY: number;
+      scale: number;
+      isExtreme: boolean;
+      efolds: number;
+      gridColor: string;
+    }
+
+    function drawVerticalGridLines(c: DrawingContext) {
+      const cols = 24;
+      for (let i = 0; i <= cols; i++) {
+        c.ctx.beginPath();
+        for (let j = 0; j <= c.h; j += 5) {
+          const rawX = (c.w / cols) * i;
+          const rawY = j;
+
+          const dx = rawX - c.centerX;
+          const dy = rawY - c.centerY;
+
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const factor = 1 + (dist / 100) * (c.scale * 0.05);
+
+          let x = c.centerX + dx * factor;
+          const y = c.centerY + dy * factor;
+
+          if (c.isExtreme) {
+            const perturbation = Math.sin(j * 0.05 + c.efolds) * (c.efolds - 80) * 0.3;
+            x += perturbation;
+          }
+
+          if (j === 0) c.ctx.moveTo(x, y);
+          else c.ctx.lineTo(x, y);
+        }
+        c.ctx.stroke();
+      }
+    }
+
+    function drawHorizontalGridLines(c: DrawingContext) {
+      const rows = 16;
+      for (let i = 0; i <= rows; i++) {
+        c.ctx.beginPath();
+        for (let j = 0; j <= c.w; j += 5) {
+          const rawX = j;
+          const rawY = (c.h / rows) * i;
+
+          const dx = rawX - c.centerX;
+          const dy = rawY - c.centerY;
+
+          const dist = Math.sqrt(dx * dx + dy * dy);
+          const factor = 1 + (dist / 100) * (c.scale * 0.05);
+
+          const x = c.centerX + dx * factor;
+          let y = c.centerY + dy * factor;
+
+          if (c.isExtreme) {
+            const perturbation = Math.cos(j * 0.05 + c.efolds) * (c.efolds - 80) * 0.3;
+            y += perturbation;
+          }
+
+          if (j === 0) c.ctx.moveTo(x, y);
+          else c.ctx.lineTo(x, y);
+        }
+        c.ctx.stroke();
+      }
+    }
+
+    function drawRadialPulses(c: DrawingContext) {
+      const pulseCount = 3;
+      for (let p = 1; p <= pulseCount; p++) {
+        const radius = ((p * 40 + (c.efolds * 2)) % 150) + 10;
+        c.ctx.beginPath();
+        c.ctx.strokeStyle = c.gridColor + (1 - radius / 160) * 0.3 + ')';
+        c.ctx.lineWidth = 1.5;
+        c.ctx.arc(c.centerX, c.centerY, radius, 0, Math.PI * 2);
+        c.ctx.stroke();
+      }
+    }
+
+    function drawSpaceTime(efolds: number) {
+      if (!canvas) return;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = canvas.clientWidth * dpr;
+      canvas.height = canvas.clientHeight * dpr;
+      ctx.scale(dpr, dpr);
+      const w = canvas.width / dpr;
+      const h = canvas.height / dpr;
+      ctx.clearRect(0, 0, w, h);
+      const isDark = document.body.classList.contains('theme-dark') || document.documentElement.classList.contains('theme-dark');
+      ctx.strokeStyle = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)';
+      ctx.lineWidth = 0.5;
+      const drawingCtx: DrawingContext = {
+        ctx, w, h,
+        centerX: w / 2, centerY: h / 2,
+        scale: 1 + (efolds - 10) / 10,
+        isExtreme: efolds > 80,
+        efolds,
+        gridColor: isDark ? 'rgba(244, 114, 182, ' : 'rgba(236, 72, 153, '
+      };
+      drawVerticalGridLines(drawingCtx);
+      drawHorizontalGridLines(drawingCtx);
+      drawRadialPulses(drawingCtx);
+    }
+
+    efoldsInput.addEventListener('input', () => {
+      presetBtns.forEach(b => b.classList.remove('active'));
+      update();
+    });
+    energyInput.addEventListener('input', () => {
+      presetBtns.forEach(b => b.classList.remove('active'));
+      update();
+    });
+
+    presetBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        presetBtns.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        const efolds = btn.getAttribute('data-efolds');
+        const energy = btn.getAttribute('data-energy');
+
+        if (efolds) efoldsInput.value = efolds;
+        if (energy) energyInput.value = energy;
+
+        update();
+      });
+    });
+
+    update();
+
+    window.addEventListener('resize', update);
+  }
+</script>