@jjlmoya/utils-textiles 1.1.0

package/src/tool/fiberPrep/component.astro

@@ -0,0 +1,987 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { FiberPrepUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const prepUI = ui as FiberPrepUI;
+const proteinFibers = prepUI.proteinFibers ?? [];
+const cellulosicFibers = prepUI.cellulosicFibers ?? [];
+---
+
+<div class="fiber-prep" id="fiber-prep-root">
+  <section class="profile-section">
+    <div class="profile-header">
+      <h3 class="profile-title">{prepUI.profileTitle ?? 'Profile Selection'}</h3>
+      <p class="profile-desc">{prepUI.profileDesc ?? ''}</p>
+    </div>
+
+    <div class="profile-grid">
+      <button class="fiber-card" data-fiber-btn data-fiber-type="protein">
+        <div class="card-bg-icon" aria-hidden="true">
+          <Icon name="mdi:sheep" />
+        </div>
+        <div class="card-body">
+          <div class="card-icon card-icon-protein">
+            <Icon name="mdi:sheep" />
+          </div>
+          <div class="card-text">
+            <h4 class="card-title">{prepUI.proteinTitle ?? 'Protein Fibers'}</h4>
+            <p class="card-origin card-origin-protein">{prepUI.proteinOrigin ?? 'Animal Origin'}</p>
+            <p class="card-desc">{prepUI.proteinDesc ?? ''}</p>
+          </div>
+          <div class="fiber-icon-list">
+            {proteinFibers.map((f) => (
+              <div class="fiber-icon-item" title={f.name}>
+                <Icon name={f.icon} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </button>
+
+      <button class="fiber-card" data-fiber-btn data-fiber-type="cellulosic">
+        <div class="card-bg-icon" aria-hidden="true">
+          <Icon name="mdi:leaf" />
+        </div>
+        <div class="card-body">
+          <div class="card-icon card-icon-cellulosic">
+            <Icon name="mdi:leaf" />
+          </div>
+          <div class="card-text">
+            <h4 class="card-title">{prepUI.cellulosicTitle ?? 'Cellulosic Fibers'}</h4>
+            <p class="card-origin card-origin-cellulosic">{prepUI.cellulosicOrigin ?? 'Plant Origin'}</p>
+            <p class="card-desc">{prepUI.cellulosicDesc ?? ''}</p>
+          </div>
+          <div class="fiber-icon-list">
+            {cellulosicFibers.map((f) => (
+              <div class="fiber-icon-item" title={f.name}>
+                <Icon name={f.icon} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </button>
+    </div>
+  </section>
+
+  <div class="tool-grid">
+    <section class="calc-card">
+      <div class="calc-header">
+        <div class="calc-icon calc-icon-green">
+          <Icon name="mdi:calculator" />
+        </div>
+        <h3 class="calc-title">{prepUI.wofTitle ?? 'WOF Calculator'}</h3>
+      </div>
+
+      <div class="wof-body">
+        <div class="wof-overlay" id="wof-overlay">
+          <p class="overlay-msg">{prepUI.wofEmptyMsg ?? 'Select a profile'}</p>
+        </div>
+
+        <div class="field-group">
+          <label class="field-label" for="weight-input">{prepUI.weightLabel ?? 'Weight (g)'}</label>
+          <div class="field-input-wrap">
+            <input
+              type="number"
+              id="weight-input"
+              class="field-input"
+              placeholder="0"
+              min="0"
+            />
+            <span class="field-unit">{prepUI.weightUnit ?? 'g'}</span>
+          </div>
+        </div>
+
+        <div class="wof-results dimmed" id="wof-results">
+          <div class="result-row result-row-indigo">
+            <div class="result-row-left">
+              <Icon name="mdi:bottle-tonic-skull" class="result-icon" />
+              <span class="result-label">{prepUI.alumLabel ?? 'Alum'}</span>
+            </div>
+            <span class="result-val result-val-indigo" id="alum-val">0g</span>
+          </div>
+          <div class="result-row result-row-amber" id="cot-container">
+            <div class="result-row-left">
+              <Icon name="mdi:spoon-sugar" class="result-icon" />
+              <span class="result-label">{prepUI.cremLabel ?? 'Cream of Tartar'}</span>
+            </div>
+            <span class="result-val result-val-amber" id="cot-val">0g</span>
+          </div>
+          <div class="result-row result-row-slate">
+            <div class="result-row-left">
+              <Icon name="mdi:nut" class="result-icon" />
+              <span class="result-label">{prepUI.ironLabel ?? 'Iron (Caution)'}</span>
+            </div>
+            <span class="result-val result-val-slate" id="iron-val">0g</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="calc-card">
+      <div class="calc-header">
+        <div class="calc-icon calc-icon-orange">
+          <Icon name="mdi:chart-bell-curve" />
+        </div>
+        <h3 class="calc-title">{prepUI.rampTitle ?? 'Thermal Ramp'}</h3>
+      </div>
+
+      <div class="ramp-body">
+        <div class="ramp-empty" id="ramp-empty">
+          <div class="ramp-empty-icon">
+            <Icon name="mdi:clock-outline" />
+          </div>
+          <p class="ramp-empty-title">{prepUI.rampEmptyTitle ?? 'Awaiting Selection'}</p>
+          <p class="ramp-empty-desc">{prepUI.rampEmptyDesc ?? ''}</p>
+        </div>
+
+        <div class="ramp-active hidden" id="ramp-active">
+          <div class="ramp-chart-wrap">
+            <svg viewBox="0 0 240 130" class="ramp-svg" id="ramp-svg">
+              <defs>
+                <linearGradient id="rampGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stop-color="rgb(99 102 241 / 0.2)"></stop>
+                  <stop offset="100%" stop-color="transparent"></stop>
+                </linearGradient>
+              </defs>
+              <g class="ramp-labels">
+                <text x="0" y="23">90°C</text>
+                <text x="0" y="63">60°C</text>
+                <text x="0" y="103">30°C</text>
+              </g>
+              <g stroke="currentcolor" class="ramp-grid">
+                <line x1="25" y1="20" x2="230" y2="20" stroke-dasharray="2 2"></line>
+                <line x1="25" y1="60" x2="230" y2="60" stroke-dasharray="2 2"></line>
+                <line x1="25" y1="100" x2="230" y2="100" stroke-width="1"></line>
+              </g>
+              <path id="ramp-fill" d="M 25 100 L 230 100 L 230 100 L 25 100 Z" fill="url(#rampGradient)" class="ramp-fill-path"></path>
+              <path id="ramp-path" d="M 25 100 L 230 100" fill="none" stroke="currentcolor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="ramp-line"></path>
+              <g class="ramp-time-labels">
+                <text x="25" y="115">0'</text>
+                <text x="93" y="115">60'</text>
+                <text x="161" y="115">120'</text>
+                <text x="210" y="115">180'</text>
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <section class="calc-card ph-card">
+    <div class="calc-header">
+      <div class="calc-icon calc-icon-purple">
+        <Icon name="mdi:beaker-outline" />
+      </div>
+      <div class="ph-header-text">
+        <h3 class="calc-title">{prepUI.phTitle ?? 'pH Stabilizer'}</h3>
+        <p class="ph-subtitle">{prepUI.phDesc ?? ''}</p>
+      </div>
+    </div>
+
+    <div class="ph-body">
+      <div class="ph-overlay" id="ph-overlay">
+        <p class="overlay-msg">{prepUI.phEmptyMsg ?? 'Select a profile'}</p>
+      </div>
+
+      <div class="ph-grid">
+        <div class="ph-field">
+          <label class="field-label" for="ph-vol">{prepUI.phVolumeLabel ?? 'Bath Volume (L)'}</label>
+          <input type="number" id="ph-vol" class="field-input" value="5" min="0.1" />
+        </div>
+        <div class="ph-field">
+          <label class="field-label" for="ph-slider">{prepUI.phSliderLabel ?? 'Current pH'}</label>
+          <input type="range" id="ph-slider" min="1" max="14" step="0.5" value="7" class="ph-slider" />
+          <div class="ph-range-labels">
+            <span>{prepUI.phAcidLabel ?? 'Acid (1)'}</span>
+            <span id="ph-current-label">7.0</span>
+            <span>{prepUI.phAlkalineLabel ?? 'Alkaline (14)'}</span>
+          </div>
+        </div>
+        <div class="ph-result">
+          <span id="ph-advice">{prepUI.phStrings?.optimal ?? 'Optimal pH'}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__fiberPrepUI = ui;
+</script>
+
+<script>
+  import type { FiberPrepUI } from './ui';
+  import type { FiberType, WOFResult, PhStrings } from './logic';
+
+  const rawUI = (window as unknown as { __fiberPrepUI: FiberPrepUI }).__fiberPrepUI;
+
+  let selectedType: FiberType | null = null;
+
+  function getEl(id: string): HTMLElement | null {
+    return document.getElementById(id);
+  }
+
+  function setElText(id: string, text: string) {
+    const el = getEl(id);
+    if (el) el.textContent = text;
+  }
+
+  function calcWOF(w: number, type: FiberType): WOFResult {
+    if (type === 'protein') {
+      return { alum: w * 0.15, creamOfTartar: w * 0.02, iron: w * 0.01 };
+    }
+    return { alum: w * 0.2, creamOfTartar: 0, iron: w * 0.02 };
+  }
+
+  function buildPhAdvice(ph: number, target: number, vol: number, s: PhStrings): string {
+    const diff = target - ph;
+    if (Math.abs(diff) < 0.1) return s.optimal;
+    if (diff > 0) {
+      return `${s.raisePrefix} ${(diff * vol * 0.5).toFixed(1)}g ${s.raiseSuffix} ${target}`;
+    }
+    return `${s.lowerPrefix} ${(Math.abs(diff) * vol * 0.2).toFixed(1)}ml ${s.lowerSuffix} ${target}`;
+  }
+
+  function updateWOF() {
+    if (!selectedType) return;
+    const weightEl = getEl('weight-input') as HTMLInputElement | null;
+    const w = weightEl ? parseFloat(weightEl.value) || 0 : 0;
+    const r = calcWOF(w, selectedType);
+    setElText('alum-val', `${r.alum.toFixed(1)}g`);
+    setElText('cot-val', `${r.creamOfTartar.toFixed(1)}g`);
+    setElText('iron-val', `${r.iron.toFixed(1)}g`);
+    getEl('wof-overlay')?.classList.add('hidden');
+    getEl('wof-results')?.classList.remove('dimmed');
+    const cotRow = getEl('cot-container');
+    if (cotRow) cotRow.classList.toggle('na', selectedType !== 'protein');
+  }
+
+  const RAMP_PATHS = {
+    protein: {
+      line: 'M 25 115 L 65 30 L 165 30 L 225 115',
+      fill: 'M 25 115 L 65 30 L 165 30 L 225 115 L 225 115 L 25 115 Z',
+    },
+    cellulosic: {
+      line: 'M 25 115 L 85 115 L 115 40 L 195 40 L 225 115',
+      fill: 'M 25 115 L 85 115 L 115 40 L 195 40 L 225 115 L 225 115 L 25 115 Z',
+    },
+  };
+
+  function updateRamp() {
+    if (!selectedType) return;
+    const paths = RAMP_PATHS[selectedType];
+    getEl('ramp-path')?.setAttribute('d', paths.line);
+    getEl('ramp-fill')?.setAttribute('d', paths.fill);
+    getEl('ramp-empty')?.classList.add('hidden');
+    getEl('ramp-active')?.classList.remove('hidden');
+  }
+
+  function updatePH() {
+    const sliderEl = getEl('ph-slider') as HTMLInputElement | null;
+    const volEl = getEl('ph-vol') as HTMLInputElement | null;
+    const ph = sliderEl ? parseFloat(sliderEl.value) : 7;
+    const vol = volEl ? parseFloat(volEl.value) || 5 : 5;
+    setElText('ph-current-label', ph.toFixed(1));
+    getEl('ph-overlay')?.classList.add('hidden');
+    const target = selectedType === 'protein' ? 4.5 : 7.0;
+    const advice = buildPhAdvice(ph, target, vol, rawUI.phStrings);
+    setElText('ph-advice', advice);
+  }
+
+  function updateButtonStates(type: FiberType) {
+    const btns = document.querySelectorAll('[data-fiber-btn]');
+    btns.forEach((btn) => {
+      const isActive = (btn as HTMLElement).dataset.fiberType === type;
+      btn.classList.toggle('active', isActive);
+    });
+  }
+
+  function activateFiberType(type: FiberType) {
+    selectedType = type;
+    updateButtonStates(type);
+    updateWOF();
+    updateRamp();
+    updatePH();
+  }
+
+  function init() {
+    const btns = document.querySelectorAll('[data-fiber-btn]');
+    btns.forEach((btn) => {
+      const el = btn as HTMLElement;
+      el.addEventListener('click', () => activateFiberType(el.dataset.fiberType as FiberType));
+    });
+    getEl('weight-input')?.addEventListener('input', updateWOF);
+    getEl('ph-slider')?.addEventListener('input', updatePH);
+    getEl('ph-vol')?.addEventListener('input', updatePH);
+  }
+
+  function startInit() {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      setTimeout(init, 100);
+    }
+    document.addEventListener('astro:page-load', init);
+  }
+
+  startInit();
+</script>
+
+<style>
+  .fiber-prep {
+    width: 100%;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .profile-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .profile-header {
+    text-align: center;
+  }
+
+  .profile-title {
+    font-size: 1.25rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-main);
+    margin: 0 0 0.5rem;
+  }
+
+  .profile-desc {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .profile-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  .fiber-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
+    border-radius: 2rem;
+    border: 2px solid var(--border-color);
+    background: var(--bg-surface);
+    text-align: left;
+    cursor: pointer;
+    overflow: hidden;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+
+  .fiber-card:hover {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  .fiber-card[data-fiber-type="protein"].active {
+    border-color: #f59e0b;
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
+  }
+
+  .fiber-card[data-fiber-type="cellulosic"].active {
+    border-color: #10b981;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+  }
+
+  .card-bg-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 2rem;
+    opacity: 0.05;
+    pointer-events: none;
+    transition: opacity 0.2s;
+  }
+
+  .fiber-card:hover .card-bg-icon {
+    opacity: 0.1;
+  }
+
+  .card-bg-icon svg {
+    width: 9rem;
+    height: 9rem;
+  }
+
+  .card-body {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .card-icon {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .card-icon svg {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .card-icon-protein {
+    background: rgba(245, 158, 11, 0.1);
+    color: #f59e0b;
+  }
+
+  .card-icon-cellulosic {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+  }
+
+  .card-title {
+    font-size: 1.125rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    color: var(--text-main);
+    margin: 0 0 0.25rem;
+  }
+
+  .card-origin {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin: 0 0 0.5rem;
+  }
+
+  .card-origin-protein {
+    color: rgba(245, 158, 11, 0.7);
+  }
+
+  .card-origin-cellulosic {
+    color: rgba(16, 185, 129, 0.7);
+  }
+
+  .card-desc {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .fiber-icon-list {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .fiber-icon-item {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .fiber-icon-item svg {
+    width: 1rem;
+    height: 1rem;
+    color: var(--text-muted);
+  }
+
+  .tool-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+
+  .calc-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 1.5rem;
+    padding: 1.5rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .calc-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .calc-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .calc-icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .calc-icon-green {
+    background: rgba(16, 185, 129, 0.1);
+    color: #10b981;
+  }
+
+  .calc-icon-orange {
+    background: rgba(249, 115, 22, 0.1);
+    color: #f97316;
+  }
+
+  .calc-icon-purple {
+    background: rgba(139, 92, 246, 0.1);
+    color: #8b5cf6;
+  }
+
+  .calc-title {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text-main);
+    margin: 0;
+  }
+
+  .wof-body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .wof-overlay {
+    position: absolute;
+    inset: -0.5rem;
+    z-index: 2;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(2px);
+    border-radius: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 1.5rem;
+    transition: opacity 0.5s;
+  }
+
+  .theme-dark .wof-overlay {
+    background: rgba(15, 23, 42, 0.85);
+  }
+
+  .wof-overlay.hidden {
+    display: none;
+  }
+
+  .ph-overlay {
+    position: absolute;
+    inset: -0.5rem;
+    z-index: 2;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(2px);
+    border-radius: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 1.5rem;
+    transition: opacity 0.5s;
+  }
+
+  .theme-dark .ph-overlay {
+    background: rgba(15, 23, 42, 0.85);
+  }
+
+  .ph-overlay.hidden {
+    display: none;
+  }
+
+  .overlay-msg {
+    font-size: 0.625rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .field-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .field-label {
+    font-size: 0.625rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+  }
+
+  .field-input-wrap {
+    position: relative;
+  }
+
+  .field-input {
+    width: 100%;
+    background: var(--bg-page);
+    border: 2px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 0.75rem 3rem 0.75rem 1rem;
+    font-size: 1.5rem;
+    font-weight: 900;
+    color: var(--text-main);
+    outline: none;
+    transition: border-color 0.2s;
+    box-sizing: border-box;
+  }
+
+  .field-input:focus {
+    border-color: #6366f1;
+  }
+
+  .field-unit {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-weight: 700;
+  }
+
+  .wof-results {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    transition: opacity 0.5s, filter 0.5s;
+  }
+
+  .wof-results.dimmed {
+    opacity: 0.4;
+    filter: grayscale(1);
+    pointer-events: none;
+  }
+
+  .result-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    border-radius: 1rem;
+    border: 1px solid transparent;
+    transition: opacity 0.3s;
+  }
+
+  .result-row.na {
+    opacity: 0.3;
+  }
+
+  .result-row-indigo {
+    background: rgba(99, 102, 241, 0.05);
+    border-color: rgba(99, 102, 241, 0.15);
+  }
+
+  .result-row-amber {
+    background: rgba(245, 158, 11, 0.05);
+    border-color: rgba(245, 158, 11, 0.15);
+  }
+
+  .result-row-slate {
+    background: var(--bg-page);
+    border-color: var(--border-color);
+  }
+
+  .result-row-left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .result-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .result-row-indigo .result-icon {
+    color: #6366f1;
+  }
+
+  .result-row-amber .result-icon {
+    color: #f59e0b;
+  }
+
+  .result-row-slate .result-icon {
+    color: var(--text-muted);
+  }
+
+  .result-label {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--text-main);
+  }
+
+  .result-val {
+    font-size: 1.25rem;
+    font-weight: 900;
+  }
+
+  .result-val-indigo {
+    color: #6366f1;
+  }
+
+  .result-val-amber {
+    color: #f59e0b;
+  }
+
+  .result-val-slate {
+    color: var(--text-muted);
+  }
+
+  .ramp-body {
+    position: relative;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ramp-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    text-align: center;
+    padding: 2rem;
+    transition: opacity 0.5s;
+  }
+
+  .ramp-empty.hidden {
+    display: none;
+  }
+
+  .ramp-empty-icon {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 1.5rem;
+    background: var(--bg-page);
+    border: 2px dashed var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+  }
+
+  .ramp-empty-icon svg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .ramp-empty-title {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .ramp-empty-desc {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--text-muted);
+    opacity: 0.6;
+    margin: 0;
+  }
+
+  .ramp-active {
+    width: 100%;
+    animation: fade-in 0.7s ease;
+  }
+
+  .ramp-active.hidden {
+    display: none;
+  }
+
+  .ramp-chart-wrap {
+    width: 100%;
+    aspect-ratio: 2 / 1;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 1rem;
+    overflow: hidden;
+  }
+
+  .ramp-svg {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  .ramp-labels {
+    font-size: 7px;
+    font-weight: 900;
+    fill: var(--text-muted);
+    text-transform: uppercase;
+  }
+
+  .ramp-grid {
+    color: var(--border-color);
+    stroke-width: 0.5;
+  }
+
+  .ramp-fill-path {
+    transition: all 1s ease;
+  }
+
+  .ramp-line {
+    color: #6366f1;
+    transition: all 1s ease;
+  }
+
+  .ramp-time-labels {
+    font-size: 7px;
+    font-weight: 900;
+    fill: var(--text-muted);
+    text-transform: uppercase;
+  }
+
+  .ph-card {
+    gap: 1.5rem;
+  }
+
+  .ph-header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .ph-subtitle {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .ph-body {
+    position: relative;
+  }
+
+  .ph-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 1.5rem;
+    align-items: start;
+  }
+
+  .ph-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .ph-slider {
+    width: 100%;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: var(--border-color);
+    appearance: none;
+    cursor: pointer;
+    accent-color: #8b5cf6;
+  }
+
+  .ph-range-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.625rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    padding: 0 0.25rem;
+  }
+
+  .ph-result {
+    background: var(--bg-page);
+    border: 2px dashed var(--border-color);
+    border-radius: 1rem;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 4rem;
+  }
+
+  .ph-result span {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--text-main);
+    text-align: center;
+  }
+
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  [data-fiber-btn] {
+    animation: slide-in 0.3s ease-out forwards;
+  }
+
+  @media (max-width: 768px) {
+    .profile-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .tool-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .ph-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>