Spaces:

HyperVector
/

Hypervector-Grid-Responsive-DAC

Running

App Files Files Community

xxparthparekhxx commited on 7 days ago

Commit

b21a36e

verified ·

1 Parent(s): c707883

Upload index.html

Browse files

Files changed (1) hide show

index.html +622 -19

index.html CHANGED Viewed

@@ -1,19 +1,622 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Grid-Responsive MAC-DAC System - Technical Diagram</title>
+<style>
+    * { box-sizing: border-box; }
+    body {
+        font-family: "Helvetica Neue", Arial, sans-serif;
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+        min-height: 100vh;
+        margin: 0;
+        padding: 30px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .main-title {
+        color: #fff;
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    .main-title h1 {
+        font-size: 28px;
+        margin: 0 0 10px 0;
+        background: linear-gradient(90deg, #00d9ff, #00ff88);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        letter-spacing: 2px;
+    }
+    .main-title p {
+        font-size: 14px;
+        color: #8892b0;
+        margin: 5px 0;
+    }
+    .drawing-board {
+        width: 1200px;
+        background: #fdfdfd;
+        border-radius: 8px;
+        box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+        overflow: hidden;
+    }
+    .diagram-container {
+        padding: 20px;
+        background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
+    }
+    /* SVG Styles */
+    text { font-family: 'Consolas', 'Monaco', monospace; font-size: 11px; fill: #333; }
+    .pipe { fill: none; stroke: #2c3e50; stroke-width: 4; }
+    .pipe-thin { fill: none; stroke: #555; stroke-width: 2; }
+    .equipment { fill: url(#metalGradient); stroke: #1a1a2e; stroke-width: 2; }
+    .jacket { fill: rgba(100, 181, 246, 0.2); stroke: #1976d2; stroke-width: 2; stroke-dasharray: 6,3; }
+    .instrument { fill: #fff; stroke: #333; stroke-width: 1.5; }
+    .liquid { fill: url(#liquidGradient); }
+    .arrow { fill: #333; }
+    .label-box { fill: #fff; stroke: #ddd; rx: 4; }
+    .pump-body { fill: url(#pumpGradient); stroke: #333; stroke-width: 2; }
+    .heat-exchanger { fill: url(#heatGradient); stroke: #c62828; stroke-width: 2; }
+    .calciner { fill: url(#calcinerGradient); stroke: #333; stroke-width: 2; }
+    .stream-label { font-size: 9px; fill: #666; }
+    .component-label { font-size: 12px; font-weight: bold; fill: #1a1a2e; }
+    .grid-signal { fill: none; stroke: #e53935; stroke-width: 3; stroke-dasharray: 8,4; }
+    .control-signal { fill: none; stroke: #7b1fa2; stroke-width: 1.5; stroke-dasharray: 4,2; }
+    .steam-line { fill: none; stroke: #ff9800; stroke-width: 3; stroke-dasharray: 10,5; }
+    .slurry-line { fill: none; stroke: #795548; stroke-width: 4; }
+    .legend-box {
+        position: absolute;
+        bottom: 100px;
+        left: 20px;
+        background: rgba(255,255,255,0.95);
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        padding: 12px;
+        font-size: 10px;
+    }
+    .legend-item { display: flex; align-items: center; margin: 4px 0; }
+    .legend-line { width: 30px; height: 4px; margin-right: 8px; border-radius: 2px; }
+    .title-block {
+        background: linear-gradient(135deg, #1a1a2e, #0f3460);
+        padding: 20px 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 3px solid #00d9ff;
+    }
+    .title-block-left h2 {
+        font-size: 16px;
+        margin: 0 0 8px 0;
+        color: #fff;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+    .title-block-left p { font-size: 11px; margin: 3px 0; color: #8892b0; }
+    .title-block-right { text-align: right; }
+    .title-block-right p { font-size: 11px; margin: 3px 0; color: #8892b0; }
+    .title-block-right strong { color: #00d9ff; }
+    .specs-panel {
+        background: #fff;
+        border-radius: 8px;
+        margin-top: 30px;
+        width: 1200px;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        overflow: hidden;
+    }
+    .specs-header {
+        background: linear-gradient(135deg, #1a1a2e, #0f3460);
+        padding: 15px 25px;
+        border-bottom: 2px solid #00d9ff;
+    }
+    .specs-header h3 {
+        margin: 0;
+        color: #fff;
+        font-size: 16px;
+        letter-spacing: 1px;
+    }
+    .specs-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+        padding: 25px;
+    }
+    .spec-card {
+        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+        border-radius: 8px;
+        padding: 15px;
+        border-left: 4px solid #00d9ff;
+    }
+    .spec-card h4 {
+        margin: 0 0 10px 0;
+        font-size: 12px;
+        color: #1a1a2e;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+    }
+    .spec-card ul {
+        margin: 0;
+        padding-left: 15px;
+        font-size: 11px;
+        color: #555;
+        line-height: 1.6;
+    }
+    .control-logic {
+        margin-top: 30px;
+        width: 1200px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        overflow: hidden;
+    }
+    .control-header {
+        background: linear-gradient(135deg, #7b1fa2, #4a148c);
+        padding: 15px 25px;
+        border-bottom: 2px solid #e040fb;
+    }
+    .control-header h3 {
+        margin: 0;
+        color: #fff;
+        font-size: 16px;
+        letter-spacing: 1px;
+    }
+    .control-content {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 20px;
+        padding: 25px;
+    }
+    .mode-card {
+        border-radius: 8px;
+        padding: 20px;
+        text-align: center;
+    }
+    .mode-surplus {
+        background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+        border: 2px solid #4caf50;
+    }
+    .mode-standard {
+        background: linear-gradient(135deg, #fff3e0, #ffe0b2);
+        border: 2px solid #ff9800;
+    }
+    .mode-idle {
+        background: linear-gradient(135deg, #ffebee, #ffcdd2);
+        border: 2px solid #f44336;
+    }
+    .mode-card h4 {
+        margin: 0 0 10px 0;
+        font-size: 14px;
+        text-transform: uppercase;
+    }
+    .mode-card .condition {
+        font-size: 11px;
+        color: #666;
+        margin-bottom: 10px;
+        font-family: 'Consolas', monospace;
+        background: rgba(0,0,0,0.05);
+        padding: 8px;
+        border-radius: 4px;
+    }
+    .mode-card .action {
+        font-size: 12px;
+        color: #333;
+        font-weight: 500;
+    }
+    .mode-card .rpm {
+        font-size: 20px;
+        font-weight: bold;
+        margin-top: 10px;
+    }
+</style>
+</head>
+<body>
+<div class="main-title">
+    <h1>Grid-Responsive Direct Air Capture System</h1>
+    <p>Mechanically Agitated Contactor (MAC) with Thermal Integration</p>
+    <p>Technical Disclosure • Prior Art Publication</p>
+</div>
+<div class="drawing-board">
+    <div class="diagram-container">
+    <svg width="100%" height="800" viewBox="0 0 1160 800">
+        <defs>
+            <linearGradient id="metalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" style="stop-color:#e8e8e8;stop-opacity:1" />
+                <stop offset="30%" style="stop-color:#ffffff;stop-opacity:1" />
+                <stop offset="70%" style="stop-color:#d0d0d0;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#b0b0b0;stop-opacity:1" />
+            </linearGradient>
+            <linearGradient id="liquidGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" style="stop-color:rgba(100,181,246,0.3);stop-opacity:1" />
+                <stop offset="100%" style="stop-color:rgba(30,136,229,0.5);stop-opacity:1" />
+            </linearGradient>
+            <linearGradient id="pumpGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" style="stop-color:#4fc3f7;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#0288d1;stop-opacity:1" />
+            </linearGradient>
+            <linearGradient id="heatGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" style="stop-color:#ffcc80;stop-opacity:1" />
+                <stop offset="50%" style="stop-color:#ff8a65;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#ef5350;stop-opacity:1" />
+            </linearGradient>
+            <linearGradient id="calcinerGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0%" style="stop-color:#ff5722;stop-opacity:1" />
+                <stop offset="50%" style="stop-color:#ff9800;stop-opacity:1" />
+                <stop offset="100%" style="stop-color:#ffc107;stop-opacity:1" />
+            </linearGradient>
+            <marker id="arrowhead" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
+                <polygon points="0 0, 7 2.5, 0 5" fill="#2c3e50" />
+            </marker>
+            <marker id="arrowhead-red" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
+                <polygon points="0 0, 7 2.5, 0 5" fill="#e53935" />
+            </marker>
+            <marker id="arrowhead-orange" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
+                <polygon points="0 0, 7 2.5, 0 5" fill="#ff9800" />
+            </marker>
+            <marker id="arrowhead-purple" markerWidth="7" markerHeight="5" refX="6" refY="2.5" orient="auto">
+                <polygon points="0 0, 7 2.5, 0 5" fill="#7b1fa2" />
+            </marker>
+            <pattern id="bafflePattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                <line x1="0" y1="10" x2="10" y2="0" stroke="#999" stroke-width="1"/>
+            </pattern>
+        </defs>
+        <!-- Grid Signal Input (Top Right) -->
+        <g id="grid-input" transform="translate(900, 40)">
+            <rect x="0" y="0" width="220" height="80" rx="8" fill="#ffebee" stroke="#e53935" stroke-width="2"/>
+            <text x="110" y="25" text-anchor="middle" class="component-label" fill="#c62828">⚡ GRID INTERFACE</text>
+            <text x="110" y="45" text-anchor="middle" font-size="10" fill="#666">Price Signal ($/MWh)</text>
+            <text x="110" y="60" text-anchor="middle" font-size="10" fill="#666">Frequency Signal (Hz)</text>
+            <text x="110" y="75" text-anchor="middle" font-size="10" fill="#666">Forecast Data</text>
+        </g>
+        <!-- Grid Signal Arrow to Controller -->
+        <path d="M 900 80 L 780 80 L 780 130" class="grid-signal" marker-end="url(#arrowhead-red)"/>
+        <text x="785" y="70" font-size="10" fill="#e53935" font-weight="bold">GRID PRICE SIGNAL</text>
+        <!-- Control System (DCS/PLC) -->
+        <g id="controller" transform="translate(680, 130)">
+            <rect x="0" y="0" width="200" height="100" rx="8" fill="#f3e5f5" stroke="#7b1fa2" stroke-width="2"/>
+            <text x="100" y="25" text-anchor="middle" class="component-label" fill="#4a148c">🖥️ GRID-RESPONSIVE</text>
+            <text x="100" y="42" text-anchor="middle" class="component-label" fill="#4a148c">CONTROLLER (DCS)</text>
+            <line x1="10" y1="55" x2="190" y2="55" stroke="#7b1fa2" stroke-width="1"/>
+            <text x="100" y="72" text-anchor="middle" font-size="9" fill="#666">Mode Selection Algorithm</text>
+            <text x="100" y="85" text-anchor="middle" font-size="9" fill="#666">VFD Speed Control</text>
+            <text x="100" y="98" text-anchor="middle" font-size="9" fill="#666">Ancillary Services Logic</text>
+        </g>
+        <!-- Air Intake Section - Moved left -->
+        <g id="air-intake" transform="translate(10, 420)">
+            <rect x="0" y="0" width="95" height="55" rx="6" fill="#e3f2fd" stroke="#1976d2" stroke-width="2"/>
+            <text x="48" y="22" text-anchor="middle" class="component-label" fill="#1565c0">💨 AMBIENT</text>
+            <text x="48" y="37" text-anchor="middle" class="component-label" fill="#1565c0">AIR INTAKE</text>
+            <text x="48" y="50" text-anchor="middle" font-size="9" fill="#666">~420 ppm CO₂</text>
+        </g>
+        <!-- Blower - Smaller size -->
+        <g id="blower" transform="translate(120, 430)">
+            <circle cx="20" cy="20" r="20" fill="url(#pumpGradient)" stroke="#0277bd" stroke-width="2"/>
+            <path d="M 12 20 L 20 12 L 28 20 L 20 28 Z" fill="#fff"/>
+            <text x="20" y="55" text-anchor="middle" font-size="10" font-weight="bold">B-101</text>
+            <text x="20" y="67" text-anchor="middle" font-size="9" fill="#666">Air Blower</text>
+        </g>
+        <!-- Air flow to reactor -->
+        <path d="M 105 450 L 120 450" class="pipe" marker-end="url(#arrowhead)"/>
+        <path d="M 160 450 L 280 450 L 280 520" class="pipe" marker-end="url(#arrowhead)"/>
+        <!-- Main Reactor (CSTR) -->
+        <g id="reactor" transform="translate(220, 180)">
+            <!-- Cooling Jacket -->
+            <path d="M -25 30 L -25 340 Q -25 360 -5 360 L 225 360 Q 245 360 245 340 L 245 30" class="jacket"/>
+            <text x="-75" y="50" font-size="9" fill="#1976d2">Cooling</text>
+            <text x="-75" y="62" font-size="9" fill="#1976d2">Water In</text>
+            <path d="M -55 70 L -25 70" stroke="#1976d2" stroke-width="2" marker-end="url(#arrowhead)"/>
+            <text x="260" y="350" font-size="9" fill="#1976d2">Cooling</text>
+            <text x="260" y="362" font-size="9" fill="#1976d2">Water Out</text>
+            <path d="M 245 340 L 260 340" stroke="#1976d2" stroke-width="2" marker-end="url(#arrowhead)"/>
+            <!-- Vessel Body -->
+            <rect x="0" y="0" width="220" height="330" rx="20" class="equipment"/>
+            <!-- Liquid Level -->
+            <rect x="5" y="60" width="210" height="265" rx="15" class="liquid"/>
+            <!-- Baffles (4 vertical) -->
+            <rect x="15" y="10" width="8" height="310" fill="#888" stroke="#555" stroke-width="1"/>
+            <rect x="197" y="10" width="8" height="310" fill="#888" stroke="#555" stroke-width="1"/>
+            <text x="110" y="25" text-anchor="middle" font-size="8" fill="#666">4× Vertical Baffles (T/10)</text>
+            <!-- Agitator Shaft -->
+            <rect x="105" y="-60" width="10" height="320" fill="#444"/>
+            <!-- Rushton Turbine Impeller -->
+            <g transform="translate(110, 200)">
+                <rect x="-50" y="-8" width="100" height="16" fill="#333"/>
+                <rect x="-55" y="-20" width="15" height="40" fill="#555" stroke="#333"/>
+                <rect x="40" y="-20" width="15" height="40" fill="#555" stroke="#333"/>
+                <rect x="-25" y="-15" width="12" height="30" fill="#555" stroke="#333"/>
+                <rect x="13" y="-15" width="12" height="30" fill="#555" stroke="#333"/>
+            </g>
+            <!-- Motor with VFD -->
+            <g transform="translate(70, -120)">
+                <rect x="0" y="0" width="80" height="60" rx="5" class="equipment"/>
+                <path d="M 0 0 L 80 60" stroke="#333" stroke-width="1"/>
+                <path d="M 80 0 L 0 60" stroke="#333" stroke-width="1"/>
+                <!-- Motor labels moved to left side to avoid pipe overlap -->
+                <text x="-10" y="25" text-anchor="end" font-size="11" font-weight="bold">M-101</text>
+                <text x="-10" y="37" text-anchor="end" font-size="9" fill="#666">VFD Motor</text>
+                <text x="-10" y="49" text-anchor="end" font-size="8" fill="#7b1fa2">100-1200 RPM</text>
+            </g>
+            <!-- Sparger at bottom -->
+            <g transform="translate(60, 320)">
+                <rect x="0" y="0" width="100" height="8" fill="#333" rx="2"/>
+                <circle cx="10" cy="4" r="3" fill="#666"/>
+                <circle cx="30" cy="4" r="3" fill="#666"/>
+                <circle cx="50" cy="4" r="3" fill="#666"/>
+                <circle cx="70" cy="4" r="3" fill="#666"/>
+                <circle cx="90" cy="4" r="3" fill="#666"/>
+                <text x="50" y="-5" text-anchor="middle" font-size="8" fill="#666">Gas Sparger Ring</text>
+            </g>
+            <!-- Reactor Labels -->
+            <text x="110" y="-140" text-anchor="middle" class="component-label">R-101</text>
+            <text x="110" y="-128" text-anchor="middle" font-size="10" fill="#666">Mechanically Agitated Contactor</text>
+        </g>
+        <!-- Reactor Specs Box - Moved right to avoid overlap -->
+        <g transform="translate(500, 280)">
+            <rect x="0" y="0" width="150" height="130" rx="6" fill="#fff" stroke="#ccc" stroke-width="1"/>
+            <rect x="0" y="0" width="150" height="25" rx="6" fill="#2196f3"/>
+            <text x="75" y="17" text-anchor="middle" font-size="10" fill="#ffffff" font-weight="bold">REACTOR SPECS</text>
+            <text x="10" y="42" font-size="9" fill="#333">• Material: 316L SS</text>
+            <text x="10" y="56" font-size="9" fill="#333">• Power: 0.5-10 kW/m³</text>
+            <text x="10" y="70" font-size="9" fill="#333">• Sorbent: 1-8M NaOH</text>
+            <text x="10" y="84" font-size="9" fill="#333">• pH Range: 12.5-14</text>
+            <text x="10" y="98" font-size="9" fill="#333">• Temp: 20-80°C</text>
+            <text x="10" y="112" font-size="9" fill="#333">• kₗa: 0.1-1.5 s⁻¹</text>
+            <text x="10" y="126" font-size="9" fill="#333">• Solids: 5-40 wt%</text>
+        </g>
+        <!-- Control Signal from DCS to Motor -->
+        <path d="M 680 180 L 450 180 L 330 80" class="control-signal" marker-end="url(#arrowhead-purple)"/>
+        <text x="520" y="170" font-size="9" fill="#7b1fa2">Speed Setpoint</text>
+        <!-- Instruments on Reactor - Repositioned for clarity -->
+        <!-- AE - CO2 Analyzer - Moved down to avoid cooling water overlap -->
+        <g transform="translate(520, 430)">
+            <circle cx="0" cy="0" r="18" class="instrument"/>
+            <text x="0" y="4" text-anchor="middle" font-size="10" font-weight="bold">AE</text>
+            <text x="25" y="-5" text-anchor="start" font-size="9">AT-101</text>
+            <text x="25" y="7" text-anchor="start" font-size="8" fill="#666">CO₂ Analyzer</text>
+            <line x1="-18" y1="0" x2="-80" y2="0" stroke="#333" stroke-width="1"/>
+        </g>
+        <!-- TT - Temperature - Moved further down -->
+        <g transform="translate(520, 490)">
+            <circle cx="0" cy="0" r="18" class="instrument"/>
+            <text x="0" y="4" text-anchor="middle" font-size="10" font-weight="bold">TT</text>
+            <text x="25" y="4" text-anchor="start" font-size="9">TT-101</text>
+            <line x1="-18" y1="0" x2="-80" y2="0" stroke="#333" stroke-width="1"/>
+        </g>
+        <!-- pH Transmitter - Left side of reactor -->
+        <g transform="translate(160, 400)">
+            <circle cx="0" cy="0" r="18" class="instrument"/>
+            <text x="0" y="4" text-anchor="middle" font-size="10" font-weight="bold">pH</text>
+            <text x="-25" y="4" text-anchor="end" font-size="9">pHT-101</text>
+            <line x1="18" y1="0" x2="60" y2="0" stroke="#333" stroke-width="1"/>
+        </g>
+        <!-- Clean Gas Vent -->
+        <path d="M 330 180 L 330 130 L 550 130" class="pipe" marker-end="url(#arrowhead)"/>
+        <g transform="translate(560, 110)">
+            <rect x="0" y="0" width="100" height="40" rx="6" fill="#e8f5e9" stroke="#43a047" stroke-width="2"/>
+            <text x="50" y="18" text-anchor="middle" font-size="10" font-weight="bold" fill="#2e7d32">🌿 CLEAN AIR</text>
+            <text x="50" y="32" text-anchor="middle" font-size="9" fill="#666">&lt;50 ppm CO₂</text>
+        </g>
+        <!-- Slurry Discharge to Regeneration -->
+        <path d="M 330 540 L 330 600 L 550 600" class="slurry-line" marker-end="url(#arrowhead)"/>
+        <text x="400" y="590" font-size="10" font-weight="bold" fill="#795548">Na₂CO₃ Slurry</text>
+        <!-- Recirculation Pump - Moved left, labels to right -->
+        <g transform="translate(40, 540)">
+            <circle cx="25" cy="25" r="25" class="pump-body" stroke="#0277bd" stroke-width="2"/>
+            <polygon points="25,10 40,35 10,35" fill="#fff"/>
+            <text x="60" y="20" text-anchor="start" font-size="10" font-weight="bold">P-101</text>
+            <text x="60" y="32" text-anchor="start" font-size="9" fill="#666">Slurry Pump</text>
+        </g>
+        <path d="M 220 510 L 40 510 L 40 535" class="slurry-line"/>
+        <path d="M 40 590 L 40 650 L 220 650 L 220 540" class="slurry-line" marker-end="url(#arrowhead)"/>
+        <text x="130" y="668" text-anchor="middle" font-size="9" fill="#666">Recirculation Loop</text>
+        <!-- Causticization Tank -->
+        <g transform="translate(570, 560)">
+            <rect x="0" y="0" width="140" height="100" rx="10" class="equipment"/>
+            <rect x="5" y="30" width="130" height="65" rx="8" fill="rgba(139,195,74,0.3)"/>
+            <text x="70" y="20" text-anchor="middle" class="component-label">T-201</text>
+            <text x="70" y="55" text-anchor="middle" font-size="9" fill="#333">Causticization</text>
+            <text x="70" y="70" text-anchor="middle" font-size="8" fill="#666">Na₂CO₃ + Ca(OH)₂ →</text>
+            <text x="70" y="82" text-anchor="middle" font-size="8" fill="#666">2NaOH + CaCite↓</text>
+        </g>
+        <!-- Calciner (Regeneration) -->
+        <g transform="translate(780, 460)">
+            <path d="M 0 100 L 0 20 Q 0 0 20 0 L 100 0 Q 120 0 120 20 L 120 100 Q 120 140 60 160 Q 0 140 0 100" class="calciner"/>
+            <text x="60" y="-10" text-anchor="middle" class="component-label">CAL-301</text>
+            <text x="60" y="50" text-anchor="middle" font-size="10" fill="#fff" font-weight="bold">CALCINER</text>
+            <text x="60" y="70" text-anchor="middle" font-size="8" fill="#fff">CaCO₃ → CaO + CO₂</text>
+            <text x="60" y="90" text-anchor="middle" font-size="8" fill="#fff">900-1000°C</text>
+        </g>
+        <!-- Flow from Causticization to Calciner -->
+        <path d="M 710 610 L 750 610 L 750 560 L 780 560" class="slurry-line" marker-end="url(#arrowhead)"/>
+        <text x="715" y="580" font-size="9" fill="#795548">CaCO₃</text>
+        <!-- Captured CO2 Output -->
+        <g transform="translate(920, 400)">
+            <rect x="0" y="0" width="120" height="50" rx="8" fill="#fff3e0" stroke="#ff9800" stroke-width="2"/>
+            <text x="60" y="20" text-anchor="middle" font-size="11" font-weight="bold" fill="#e65100">🎯 CAPTURED CO₂</text>
+            <text x="60" y="38" text-anchor="middle" font-size="9" fill="#666">Pure Stream (&gt;95%)</text>
+        </g>
+        <path d="M 900 460 L 960 460 L 960 450" class="pipe" stroke="#ff9800" marker-end="url(#arrowhead-orange)"/>
+        <!-- Thermal Integration (SMR/Waste Heat) -->
+        <g transform="translate(920, 530)">
+            <rect x="0" y="0" width="180" height="90" rx="10" fill="url(#heatGradient)" stroke="#c62828" stroke-width="2"/>
+            <text x="90" y="25" text-anchor="middle" font-size="12" font-weight="bold" fill="#fff">🔥 THERMAL SOURCE</text>
+            <text x="90" y="45" text-anchor="middle" font-size="10" fill="#fff">Nuclear SMR / Geothermal</text>
+            <text x="90" y="62" text-anchor="middle" font-size="9" fill="#fff">Industrial Waste Heat</text>
+            <text x="90" y="80" text-anchor="middle" font-size="9" fill="#fff">Steam: 2-5 bar</text>
+        </g>
+        <path d="M 920 575 L 900 575" class="steam-line" marker-end="url(#arrowhead-orange)"/>
+        <text x="850" y="570" font-size="9" fill="#ff9800" font-weight="bold">Heat</text>
+        <!-- CaO Recycle Loop -->
+        <path d="M 840 620 L 840 680 L 640 680 L 640 660" class="pipe-thin" stroke="#795548" marker-end="url(#arrowhead)"/>
+        <text x="740" y="695" text-anchor="middle" font-size="9" fill="#795548">CaO + H₂O → Ca(OH)₂ Recycle</text>
+        <!-- NaOH Recycle to Reactor -->
+        <path d="M 570 660 L 440 660 L 440 540" class="pipe" stroke="#4caf50" marker-end="url(#arrowhead)"/>
+        <text x="510" y="675" font-size="9" fill="#4caf50" font-weight="bold">Regenerated NaOH</text>
+        <!-- Legend - Moved to bottom right to avoid covering pump -->
+        <g transform="translate(1010, 690)">
+            <rect x="0" y="0" width="130" height="100" rx="6" fill="rgba(255,255,255,0.95)" stroke="#ddd"/>
+            <text x="65" y="15" text-anchor="middle" font-size="10" font-weight="bold">LEGEND</text>
+            <line x1="10" y1="28" x2="40" y2="28" stroke="#2c3e50" stroke-width="4"/>
+            <text x="50" y="32" font-size="9">Process Pipe</text>
+            <line x1="10" y1="44" x2="40" y2="44" stroke="#e53935" stroke-width="3" stroke-dasharray="8,4"/>
+            <text x="50" y="48" font-size="9">Grid Signal</text>
+            <line x1="10" y1="60" x2="40" y2="60" stroke="#7b1fa2" stroke-width="1.5" stroke-dasharray="4,2"/>
+            <text x="50" y="64" font-size="9">Control Signal</text>
+            <line x1="10" y1="76" x2="40" y2="76" stroke="#ff9800" stroke-width="3" stroke-dasharray="10,5"/>
+            <text x="50" y="80" font-size="9">Steam/Heat</text>
+            <line x1="10" y1="92" x2="40" y2="92" stroke="#795548" stroke-width="4"/>
+            <text x="50" y="96" font-size="9">Slurry Line</text>
+        </g>
+    </svg>
+    </div>
+    <div class="title-block">
+        <div class="title-block-left">
+            <h2>Process Flow Diagram</h2>
+            <p><strong>System:</strong> Grid-Responsive MAC-DAC with Calcium Loop Regeneration</p>
+            <p><strong>Field:</strong> Chemical Engineering • Grid Regulation • Carbon Dioxide Removal (CDR)</p>
+        </div>
+        <div class="title-block-right">
+            <p><strong>Drawing No:</strong> HVS-001-A Rev.2</p>
+            <p><strong>Date:</strong> 05-JAN-2026</p>
+            <p><strong>Author:</strong> Parth Parekh (Independent Researcher)</p>
+            <p><strong>Status:</strong> Prior Art Publication</p>
+        </div>
+    </div>
+</div>
+<!-- Operating Parameters Panel -->
+<div class="specs-panel">
+    <div class="specs-header">
+        <h3>📊 OPERATING PARAMETER RANGES</h3>
+    </div>
+    <div class="specs-grid">
+        <div class="spec-card">
+            <h4>Mechanical Parameters</h4>
+            <ul>
+                <li>Agitator Speed: 100 – 1200 RPM</li>
+                <li>Power Input: 0.5 – 10.0 kW/m³</li>
+                <li>Impeller: Rushton/Smith Turbine</li>
+                <li>Baffles: 4× (width T/10)</li>
+            </ul>
+        </div>
+        <div class="spec-card">
+            <h4>Chemical Parameters</h4>
+            <ul>
+                <li>Sorbent: 1.0 – 8.0 M NaOH/KOH</li>
+                <li>pH Range: 12.5 – 14.0</li>
+                <li>Slurry Solids: 5 – 40 wt%</li>
+                <li>Bubble Size (d₃₂): 0.1 – 5 mm</li>
+            </ul>
+        </div>
+        <div class="spec-card">
+            <h4>Process Conditions</h4>
+            <ul>
+                <li>Temperature: 20°C – 80°C</li>
+                <li>Gas Residence: 10 – 300 sec</li>
+                <li>Target kₗa: 0.1 – 1.5 s⁻¹</li>
+                <li>Regeneration: 900-1000°C</li>
+            </ul>
+        </div>
+        <div class="spec-card">
+            <h4>Ancillary Services</h4>
+            <ul>
+                <li>Frequency Regulation: &lt;1 sec response</li>
+                <li>Spinning Reserve: Instant load shed</li>
+                <li>Voltage Support: Reactive power ctrl</li>
+                <li>"Negative Load" Battery Mode</li>
+            </ul>
+        </div>
+    </div>
+</div>
+<!-- Control Logic Panel -->
+<div class="control-logic">
+    <div class="control-header">
+        <h3>🎛️ GRID-RESPONSIVE CONTROL ALGORITHM</h3>
+    </div>
+    <div class="control-content">
+        <div class="mode-card mode-surplus">
+            <h4 style="color:#2e7d32">⚡ Maximum Capture Mode</h4>
+            <div class="condition">
+                IF Grid_Freq > 60.05 Hz<br>
+                OR Grid_Price < Price_Low
+            </div>
+            <div class="action">
+                Activate Auxiliary Blowers<br>
+                Run at Maximum Power
+            </div>
+            <div class="rpm" style="color:#2e7d32">1200 RPM</div>
+            <div style="font-size:10px;color:#666;margin-top:5px">Surplus Power Dump Load</div>
+        </div>
+        <div class="mode-card mode-standard">
+            <h4 style="color:#e65100">📈 Economic Optimization</h4>
+            <div class="condition">
+                IF Price_Low < Grid_Price<br>
+                < Price_High
+            </div>
+            <div class="action">
+                Calculate Optimal RPM based on<br>
+                Grid Price vs Carbon Credits
+            </div>
+            <div class="rpm" style="color:#e65100">VARIABLE</div>
+            <div style="font-size:10px;color:#666;margin-top:5px">Balance Cost & Capture</div>
+        </div>
+        <div class="mode-card mode-idle">
+            <h4 style="color:#c62828">🔻 Grid Support / Idle</h4>
+            <div class="condition">
+                IF Grid_Price > Price_High<br>
+                (Scarcity Scenario)
+            </div>
+            <div class="action">
+                Minimum Suspension Speed<br>
+                Deactivate Heaters
+            </div>
+            <div class="rpm" style="color:#c62828">~100 RPM</div>
+            <div style="font-size:10px;color:#666;margin-top:5px">Prevent Solids Settling Only</div>
+        </div>
+    </div>
+</div>
+</body>
+</html>