@jjlmoya/utils-science 1.35.0 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-science",
-    "version": "1.35.0",
+    "version": "1.37.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -11,6 +11,7 @@ import { stellarHabitabilityZone } from '../tool/stellar-habitability-zone/index
 import { radioactiveDecay } from '../tool/radioactive-decay/index';
 import { naturalSelectionDrift } from '../tool/natural-selection-drift/index';
 import { entropySecondLaw } from '../tool/entropy-second-law/index';
+import { doubleSlitDecoherence } from '../tool/double-slit-decoherence/index';
 import { phaseDiagramCriticalPoints } from '../tool/phase-diagram-critical-points/index';
 import { twinParadoxVisualizer } from '../tool/twin-paradox-visualizer/index';
 import { mandelbrotFractal } from '../tool/mandelbrot-fractal/index';
@@ -20,7 +21,7 @@ import { rocheLimitSatelliteDisruption } from '../tool/roche-limit-satellite-dis
 
 export const scienceCategory: ScienceCategoryEntry = {
   icon: 'mdi:flask',
-  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival, threeBodyProblem, rocheLimitSatelliteDisruption],
+  tools: [colonyCounter, asteroidImpact, microwaveDetector, simulationProbability, cellularRenewal, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, doubleSlitDecoherence, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival, threeBodyProblem, rocheLimitSatelliteDisruption],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -11,6 +11,7 @@ export { stellarHabitabilityZone } from './tool/stellar-habitability-zone/entry'
 export { radioactiveDecay } from './tool/radioactive-decay/entry';
 export { naturalSelectionDrift } from './tool/natural-selection-drift/entry';
 export { entropySecondLaw } from './tool/entropy-second-law/entry';
+export { doubleSlitDecoherence } from './tool/double-slit-decoherence/entry';
 export { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points/entry';
 export { twinParadoxVisualizer } from './tool/twin-paradox-visualizer/entry';
 export { mandelbrotFractal } from './tool/mandelbrot-fractal/entry';
@@ -30,10 +31,11 @@ import { stellarHabitabilityZone } from './tool/stellar-habitability-zone/entry'
 import { radioactiveDecay } from './tool/radioactive-decay/entry';
 import { naturalSelectionDrift } from './tool/natural-selection-drift/entry';
 import { entropySecondLaw } from './tool/entropy-second-law/entry';
+import { doubleSlitDecoherence } from './tool/double-slit-decoherence/entry';
 import { phaseDiagramCriticalPoints } from './tool/phase-diagram-critical-points/entry';
 import { twinParadoxVisualizer } from './tool/twin-paradox-visualizer/entry';
 import { mandelbrotFractal } from './tool/mandelbrot-fractal/entry';
 import { planetAtmosphereSurvival } from './tool/planet-atmosphere-survival/entry';
 import { threeBodyProblem } from './tool/three-body-problem/entry';
 import { rocheLimitSatelliteDisruption } from './tool/roche-limit-satellite-disruption/entry';
-export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival, threeBodyProblem, rocheLimitSatelliteDisruption];
+export const ALL_ENTRIES = [asteroidImpact, cellularRenewal, colonyCounter, microwaveDetector, simulationProbability, cosmicInflation, temperatureTimeline, lorenzAttractor, stellarHabitabilityZone, radioactiveDecay, naturalSelectionDrift, entropySecondLaw, doubleSlitDecoherence, phaseDiagramCriticalPoints, twinParadoxVisualizer, mandelbrotFractal, planetAtmosphereSurvival, threeBodyProblem, rocheLimitSatelliteDisruption];

package/src/index.ts

@@ -12,6 +12,7 @@ export { STELLAR_HABITABILITY_ZONE_TOOL } from './tool/stellar-habitability-zone
 export { RADIOACTIVE_DECAY_TOOL } from './tool/radioactive-decay/index';
 export { NATURAL_SELECTION_DRIFT_TOOL } from './tool/natural-selection-drift/index';
 export { ENTROPY_SECOND_LAW_TOOL } from './tool/entropy-second-law/index';
+export { DOUBLE_SLIT_DECOHERENCE_TOOL } from './tool/double-slit-decoherence/index';
 export { PHASE_DIAGRAM_CRITICAL_POINTS_TOOL } from './tool/phase-diagram-critical-points/index';
 export { TWIN_PARADOX_VISUALIZER_TOOL } from './tool/twin-paradox-visualizer/index';
 export { MANDELBROT_FRACTAL_TOOL } from './tool/mandelbrot-fractal/index';

package/src/tests/locale_completeness.test.ts

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

package/src/tests/tool_validation.test.ts

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

package/src/tool/double-slit-decoherence/bibliography.astro

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

package/src/tool/double-slit-decoherence/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Feynman Lectures on Physics, Volume III, Chapter 1: Quantum Behavior',
+    url: 'https://www.feynmanlectures.caltech.edu/III_01.html',
+  },
+  {
+    name: 'Decoherence, the measurement problem, and interpretations of quantum mechanics',
+    url: 'https://arxiv.org/abs/quant-ph/0312059',
+  },
+];

package/src/tool/double-slit-decoherence/component.astro

@@ -0,0 +1,235 @@
+---
+import './double-slit-decoherence-simulator.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="dslit-lab" id="dslit-lab">
+  <section class="dslit-stage" aria-label={ui.stage}>
+    <div class="dslit-apparatus">
+      <canvas id="dslit-canvas" width="860" height="520"></canvas>
+      <div class="dslit-source" aria-hidden="true"></div>
+      <div class="dslit-barrier" aria-hidden="true">
+        <span></span>
+        <i></i>
+        <span></span>
+        <i></i>
+        <span></span>
+      </div>
+      <div class="dslit-screen" aria-hidden="true"></div>
+    </div>
+
+    <div class="dslit-mode-strip">
+      <span>{ui.unobserved}</span>
+      <strong id="dslit-state-label" data-wave={ui.waveMode} data-particle={ui.particleMode}>{ui.waveMode}</strong>
+      <span>{ui.observed}</span>
+    </div>
+  </section>
+
+  <section class="dslit-panel" aria-label={ui.controls}>
+    <div class="dslit-kicker">{ui.kicker}</div>
+    <label class="dslit-toggle">
+      <input id="dslit-detector-enabled" type="checkbox" />
+      <span>{ui.detectorToggle}</span>
+    </label>
+
+    <label class="dslit-field" for="dslit-detector">
+      <span>{ui.detectorStrength}</span>
+      <output id="dslit-detector-output">0%</output>
+      <input id="dslit-detector" type="range" min="0" max="100" step="1" value="0" />
+    </label>
+
+    <label class="dslit-field" for="dslit-separation">
+      <span>{ui.slitSeparation}</span>
+      <output id="dslit-separation-output">1.80</output>
+      <input id="dslit-separation" type="range" min="80" max="280" step="5" value="180" />
+    </label>
+
+    <label class="dslit-field" for="dslit-width">
+      <span>{ui.slitWidth}</span>
+      <output id="dslit-width-output">0.42</output>
+      <input id="dslit-width" type="range" min="16" max="90" step="2" value="42" />
+    </label>
+  </section>
+
+  <section class="dslit-readout" aria-label={ui.results}>
+    <article>
+      <span>{ui.fringeVisibility}</span>
+      <strong id="dslit-visibility">1.00</strong>
+    </article>
+    <article>
+      <span>{ui.whichPath}</span>
+      <strong id="dslit-path">0%</strong>
+    </article>
+    <article>
+      <span>{ui.coherence}</span>
+      <strong id="dslit-coherence">100%</strong>
+    </article>
+    <p>{ui.readoutNote}</p>
+  </section>
+</div>
+
+<script>
+  import { calculateDoubleSlitPattern, measurePattern } from './logic';
+
+  const canvas = document.getElementById('dslit-canvas') as HTMLCanvasElement | null;
+  const ctx = canvas?.getContext('2d');
+  const detectorToggle = document.getElementById('dslit-detector-enabled') as HTMLInputElement | null;
+  const detectorInput = document.getElementById('dslit-detector') as HTMLInputElement | null;
+  const separationInput = document.getElementById('dslit-separation') as HTMLInputElement | null;
+  const widthInput = document.getElementById('dslit-width') as HTMLInputElement | null;
+  const detectorOutput = document.getElementById('dslit-detector-output');
+  const separationOutput = document.getElementById('dslit-separation-output');
+  const widthOutput = document.getElementById('dslit-width-output');
+  const visibilityOutput = document.getElementById('dslit-visibility');
+  const pathOutput = document.getElementById('dslit-path');
+  const coherenceOutput = document.getElementById('dslit-coherence');
+  const stateLabel = document.getElementById('dslit-state-label');
+
+  const state = {
+    detectorStrength: 0,
+    slitSeparation: 1.8,
+    slitWidth: 0.42,
+    wavelength: 0.36,
+    screenDistance: 4.2,
+    phase: 0,
+    raf: 0,
+  };
+
+  function isDarkTheme() {
+    return document.documentElement.classList.contains('theme-dark') || document.body.classList.contains('theme-dark');
+  }
+
+  function createBeamGradient(sourceX: number, screenX: number, isDark: boolean) {
+    const gradient = ctx!.createLinearGradient(sourceX, 0, screenX, 0);
+    gradient.addColorStop(0, isDark ? 'rgba(64, 224, 208, 0.1)' : 'rgba(0, 139, 130, 0.16)');
+    gradient.addColorStop(0.48, isDark ? 'rgba(64, 224, 208, 0.3)' : 'rgba(0, 139, 130, 0.42)');
+    gradient.addColorStop(1, isDark ? 'rgba(255, 207, 102, 0.2)' : 'rgba(181, 111, 0, 0.32)');
+
+    return gradient;
+  }
+
+  function drawInterferencePaths(
+    samples: ReturnType<typeof calculateDoubleSlitPattern>,
+    scene: { sourceX: number; slitX: number; screenX: number; centerY: number; slitGap: number },
+    isDark: boolean,
+  ) {
+    ctx!.strokeStyle = createBeamGradient(scene.sourceX, scene.screenX, isDark);
+    ctx!.lineWidth = isDark ? 1.2 : 1.45;
+    ctx!.globalCompositeOperation = isDark ? 'lighter' : 'multiply';
+
+    samples.forEach((sample, index) => {
+      if (index % 2 !== 0) return;
+      const screenY = scene.centerY + sample.y * 68;
+      const glow = Math.max(0.04, sample.observedIntensity);
+      ctx!.globalAlpha = Math.min(isDark ? 0.62 : 0.74, glow * (isDark ? 0.85 : 1.05));
+      ctx!.beginPath();
+      ctx!.moveTo(scene.sourceX, scene.centerY + Math.sin(state.phase + index * 0.05) * 8);
+      ctx!.quadraticCurveTo(scene.slitX, scene.centerY - scene.slitGap / 2, scene.screenX, screenY);
+      ctx!.stroke();
+      ctx!.beginPath();
+      ctx!.moveTo(scene.sourceX, scene.centerY + Math.cos(state.phase + index * 0.04) * 8);
+      ctx!.quadraticCurveTo(scene.slitX, scene.centerY + scene.slitGap / 2, scene.screenX, screenY);
+      ctx!.stroke();
+    });
+
+    ctx!.globalAlpha = 1;
+    ctx!.globalCompositeOperation = 'source-over';
+  }
+
+  function drawBarrier(scene: { slitX: number; centerY: number; slitGap: number; slitWidth: number }, isDark: boolean) {
+    ctx!.fillStyle = isDark ? 'rgba(249, 245, 234, 0.82)' : 'rgba(9, 18, 32, 0.86)';
+    ctx!.fillRect(scene.slitX - 12, 58, 24, scene.centerY - scene.slitGap / 2 - scene.slitWidth / 2 - 58);
+    ctx!.fillRect(scene.slitX - 12, scene.centerY - scene.slitGap / 2 + scene.slitWidth / 2, 24, scene.slitGap - scene.slitWidth);
+    ctx!.fillRect(scene.slitX - 12, scene.centerY + scene.slitGap / 2 + scene.slitWidth / 2, 24, canvas!.height - (scene.centerY + scene.slitGap / 2 + scene.slitWidth / 2) - 58);
+  }
+
+  function drawScreenPattern(
+    samples: ReturnType<typeof calculateDoubleSlitPattern>,
+    scene: { screenX: number; centerY: number },
+    isDark: boolean,
+  ) {
+    samples.forEach((sample) => {
+      const y = scene.centerY + sample.y * 68;
+      const intensity = Math.min(1, sample.observedIntensity);
+      ctx!.fillStyle = isDark
+        ? `rgba(255, ${Math.round(178 + intensity * 60)}, 92, ${0.12 + intensity * 0.8})`
+        : `rgba(${Math.round(170 + intensity * 30)}, ${Math.round(95 + intensity * 60)}, 0, ${0.22 + intensity * 0.72})`;
+      ctx!.fillRect(scene.screenX, y - 1.2 - intensity * 3, 34 + intensity * 30, 2.4 + intensity * 6);
+    });
+  }
+
+  function drawBeam(samples: ReturnType<typeof calculateDoubleSlitPattern>) {
+    if (!ctx || !canvas) return;
+
+    const isDark = isDarkTheme();
+    const scene = {
+      sourceX: 86,
+      slitX: 330,
+      screenX: 742,
+      centerY: canvas.height / 2,
+      slitGap: state.slitSeparation * 58,
+      slitWidth: state.slitWidth * 42,
+    };
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawInterferencePaths(samples, scene, isDark);
+    drawBarrier(scene, isDark);
+    drawScreenPattern(samples, scene, isDark);
+  }
+
+  function update() {
+    const samples = calculateDoubleSlitPattern(state, 201);
+    const metrics = measurePattern(samples, state.detectorStrength);
+
+    detectorOutput!.textContent = `${Math.round(state.detectorStrength * 100)}%`;
+    separationOutput!.textContent = state.slitSeparation.toFixed(2);
+    widthOutput!.textContent = state.slitWidth.toFixed(2);
+    visibilityOutput!.textContent = metrics.fringeVisibility.toFixed(2);
+    pathOutput!.textContent = `${Math.round(metrics.whichPath * 100)}%`;
+    coherenceOutput!.textContent = `${Math.round(metrics.coherence * 100)}%`;
+    stateLabel!.textContent = state.detectorStrength > 0.55
+      ? stateLabel!.getAttribute('data-particle') ?? 'Particle bands'
+      : stateLabel!.getAttribute('data-wave') ?? 'Interference';
+
+    detectorInput?.style.setProperty('--fill', `${state.detectorStrength * 100}%`);
+    separationInput?.style.setProperty('--fill', `${((state.slitSeparation * 100 - 80) / 200) * 100}%`);
+    widthInput?.style.setProperty('--fill', `${((state.slitWidth * 100 - 16) / 74) * 100}%`);
+
+    drawBeam(samples);
+  }
+
+  function animate() {
+    state.phase += 0.025 * (1 - state.detectorStrength * 0.55);
+    update();
+    state.raf = window.requestAnimationFrame(animate);
+  }
+
+  detectorToggle?.addEventListener('change', () => {
+    state.detectorStrength = detectorToggle.checked ? Math.max(0.72, Number(detectorInput?.value ?? 0) / 100) : 0;
+    if (detectorInput) detectorInput.value = String(Math.round(state.detectorStrength * 100));
+    update();
+  });
+
+  detectorInput?.addEventListener('input', () => {
+    state.detectorStrength = Number(detectorInput.value) / 100;
+    if (detectorToggle) detectorToggle.checked = state.detectorStrength > 0.02;
+    update();
+  });
+
+  separationInput?.addEventListener('input', () => {
+    state.slitSeparation = Number(separationInput.value) / 100;
+    update();
+  });
+
+  widthInput?.addEventListener('input', () => {
+    state.slitWidth = Number(widthInput.value) / 100;
+    update();
+  });
+
+  animate();
+</script>

package/src/tool/double-slit-decoherence/double-slit-decoherence-simulator.css

@@ -0,0 +1,344 @@
+.dslit-lab {
+  --dslit-ink: #141722;
+  --dslit-muted: rgba(20, 23, 34, 0.62);
+  --dslit-line: rgba(20, 23, 34, 0.12);
+  --dslit-cyan: #40e0d0;
+  --dslit-cyan-ink: #008b82;
+  --dslit-amber: #ffcf66;
+  --dslit-amber-ink: #a86600;
+  --dslit-rose: #ff6f91;
+  --dslit-panel: transparent;
+  --dslit-track: rgba(20, 23, 34, 0.18);
+
+  display: grid;
+  gap: 1rem;
+  width: min(100%, 1220px);
+  padding: clamp(0.9rem, 3vw, 2rem);
+  color: var(--dslit-ink);
+  background:
+    linear-gradient(120deg, rgba(64, 224, 208, 0.18), transparent 38%),
+    linear-gradient(300deg, rgba(255, 207, 102, 0.18), transparent 44%),
+    #f7f3ea;
+  border: 1px solid rgba(20, 23, 34, 0.08);
+  border-radius: 24px;
+  box-shadow: 0 28px 70px rgba(45, 37, 24, 0.14);
+}
+
+.theme-dark .dslit-lab {
+  --dslit-ink: #f9f5ea;
+  --dslit-muted: rgba(249, 245, 234, 0.66);
+  --dslit-line: rgba(249, 245, 234, 0.14);
+  --dslit-panel: rgba(10, 14, 24, 0.54);
+  --dslit-track: rgba(249, 245, 234, 0.18);
+
+  background:
+    linear-gradient(120deg, rgba(64, 224, 208, 0.16), transparent 38%),
+    linear-gradient(300deg, rgba(255, 111, 145, 0.14), transparent 44%),
+    #090e18;
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.dslit-stage,
+.dslit-panel,
+.dslit-readout {
+  min-width: 0;
+}
+
+.dslit-stage {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.dslit-apparatus {
+  position: relative;
+  overflow: hidden;
+  min-height: 320px;
+  border: 1px solid var(--dslit-line);
+  border-radius: 18px;
+  background:
+    repeating-linear-gradient(90deg, transparent 0 42px, rgba(20, 23, 34, 0.045) 42px 43px),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent);
+}
+
+.theme-dark .dslit-apparatus {
+  background:
+    repeating-linear-gradient(90deg, transparent 0 42px, rgba(249, 245, 234, 0.035) 42px 43px),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
+}
+
+#dslit-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 43 / 26;
+}
+
+.dslit-source,
+.dslit-screen,
+.dslit-barrier {
+  position: absolute;
+  top: 11%;
+  bottom: 11%;
+  pointer-events: none;
+}
+
+.dslit-source {
+  left: 8%;
+  width: 10px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, transparent, var(--dslit-cyan-ink), transparent);
+  box-shadow: 0 0 22px rgba(0, 139, 130, 0.42);
+}
+
+.theme-dark .dslit-source {
+  background: linear-gradient(180deg, transparent, var(--dslit-cyan), transparent);
+  box-shadow: 0 0 28px rgba(64, 224, 208, 0.72);
+}
+
+.dslit-screen {
+  right: 10%;
+  width: 12px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, transparent, rgba(168, 102, 0, 0.9), transparent);
+  box-shadow: 0 0 24px rgba(168, 102, 0, 0.28);
+}
+
+.theme-dark .dslit-screen {
+  background: linear-gradient(180deg, transparent, rgba(255, 207, 102, 0.92), transparent);
+  box-shadow: 0 0 34px rgba(255, 207, 102, 0.46);
+}
+
+.dslit-barrier {
+  left: 38.2%;
+  display: grid;
+  grid-template-rows: 1fr 34px 0.7fr 34px 1fr;
+  width: 18px;
+}
+
+.dslit-barrier span {
+  display: block;
+  background: rgba(20, 23, 34, 0.84);
+}
+
+.theme-dark .dslit-barrier span {
+  background: rgba(249, 245, 234, 0.82);
+}
+
+.dslit-barrier i {
+  display: block;
+  background: rgba(64, 224, 208, 0.22);
+  box-shadow: inset 0 0 16px rgba(64, 224, 208, 0.32);
+}
+
+.dslit-mode-strip {
+  display: grid;
+  grid-template-columns: 1fr minmax(8.5rem, auto) 1fr;
+  gap: 0.8rem;
+  align-items: center;
+  min-height: 2.2rem;
+}
+
+.dslit-mode-strip span,
+.dslit-kicker,
+.dslit-field span,
+.dslit-readout span {
+  color: var(--dslit-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.dslit-mode-strip span:last-child {
+  text-align: right;
+}
+
+.dslit-mode-strip strong {
+  align-self: center;
+  justify-self: center;
+  padding: 0.22rem 0;
+  border-bottom: 1px solid currentcolor;
+  color: var(--dslit-ink);
+  font-size: 0.78rem;
+  line-height: 1;
+  text-align: center;
+}
+
+.dslit-panel {
+  display: grid;
+  gap: 1rem;
+  padding: 0.25rem 0 0.25rem 1rem;
+  border-left: 1px solid var(--dslit-line);
+  background: transparent;
+}
+
+.theme-dark .dslit-panel {
+  padding: 1rem;
+  border: 1px solid var(--dslit-line);
+  border-radius: 18px;
+  background: var(--dslit-panel);
+}
+
+.dslit-toggle {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  min-height: 48px;
+  color: var(--dslit-ink);
+  font-weight: 750;
+  cursor: pointer;
+}
+
+.dslit-toggle input {
+  width: 46px;
+  height: 26px;
+  appearance: none;
+  border: 1px solid rgba(20, 23, 34, 0.18);
+  border-radius: 999px;
+  background: rgba(20, 23, 34, 0.045);
+  cursor: pointer;
+}
+
+.theme-dark .dslit-toggle input {
+  border-color: var(--dslit-line);
+  background: rgba(249, 245, 234, 0.12);
+}
+
+.dslit-toggle input::before {
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 2px;
+  border-radius: 50%;
+  background: var(--dslit-cyan-ink);
+  transition: transform 180ms ease, background-color 180ms ease;
+  content: '';
+}
+
+.theme-dark .dslit-toggle input::before {
+  background: var(--dslit-ink);
+}
+
+.dslit-toggle input:checked::before {
+  background: var(--dslit-rose);
+  transform: translateX(20px);
+}
+
+.dslit-field {
+  display: grid;
+  gap: 0.55rem;
+  width: 100%;
+}
+
+.dslit-field output {
+  font-size: clamp(2rem, 9vw, 3.2rem);
+  font-weight: 760;
+  letter-spacing: 0;
+  line-height: 0.9;
+}
+
+.dslit-field input[type='range'] {
+  --fill: 0%;
+
+  width: 100%;
+  height: 24px;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  vertical-align: middle;
+}
+
+.dslit-field input[type='range']::-webkit-slider-runnable-track {
+  height: 3px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--dslit-cyan-ink) 0 var(--fill), var(--dslit-track) var(--fill) 100%);
+}
+
+.dslit-field input[type='range']::-webkit-slider-thumb {
+  width: 16px;
+  height: 16px;
+  margin-top: -6.5px;
+  appearance: none;
+  border: 2px solid #f7f3ea;
+  border-radius: 50%;
+  background: var(--dslit-cyan-ink);
+  box-shadow: 0 0 0 3px rgba(0, 139, 130, 0.08);
+  cursor: grab;
+}
+
+.theme-dark .dslit-field input[type='range']::-webkit-slider-runnable-track {
+  background: linear-gradient(90deg, var(--dslit-cyan) 0 var(--fill), var(--dslit-track) var(--fill) 100%);
+}
+
+.theme-dark .dslit-field input[type='range']::-webkit-slider-thumb {
+  border-color: #090e18;
+  background: var(--dslit-ink);
+  box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.08);
+}
+
+.dslit-field input[type='range']::-moz-range-track {
+  height: 3px;
+  border-radius: 999px;
+  background: var(--dslit-track);
+}
+
+.dslit-field input[type='range']::-moz-range-progress {
+  height: 3px;
+  border-radius: 999px;
+  background: var(--dslit-cyan-ink);
+}
+
+.dslit-field input[type='range']::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #f7f3ea;
+  border-radius: 50%;
+  background: var(--dslit-cyan-ink);
+  box-shadow: 0 0 0 3px rgba(0, 139, 130, 0.08);
+  cursor: grab;
+}
+
+.theme-dark .dslit-field input[type='range']::-moz-range-progress {
+  background: var(--dslit-cyan);
+}
+
+.theme-dark .dslit-field input[type='range']::-moz-range-thumb {
+  border-color: #090e18;
+  background: var(--dslit-ink);
+  box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.08);
+}
+
+.dslit-readout {
+  display: grid;
+  gap: 0.75rem;
+  align-content: start;
+  padding: 0.25rem 0 0.25rem 1rem;
+  border-left: 1px solid var(--dslit-line);
+}
+
+.dslit-readout article {
+  display: grid;
+  gap: 0.32rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--dslit-line);
+}
+
+.dslit-readout strong {
+  font-size: clamp(2rem, 8vw, 3.7rem);
+  line-height: 0.86;
+}
+
+.dslit-readout p {
+  max-width: 42ch;
+  margin: 0;
+  color: var(--dslit-muted);
+  font-size: 0.88rem;
+  line-height: 1.58;
+}
+
+@media (min-width: 940px) {
+  .dslit-lab {
+    grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.62fr) minmax(230px, 0.54fr);
+    align-items: start;
+  }
+}