debloper · July 24, 2025 07:38
diff --git a/simple-biomonitor-watchface.html b/simple-biomonitor-watchface.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Elegance Health Monitor - Artistic Variations</title>
    <style>
        body {
            font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            color: white;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }
        
        .hero-title {
            text-align: center;
            font-size: 32px;
            font-weight: 100;
            color: #ffffff;
            margin: 20px 0 40px 0;
            letter-spacing: -0.5px;
        }
        
        .philosophy {
            text-align: center;
            font-style: italic;
            color: #888;
            margin-bottom: 50px;
            font-size: 14px;
        }
        
        .mockup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
            margin: 20px 0;
        }
        
        .mockup-container {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 20px;
            padding: 25px;
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
        }
        
        .mockup-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        }
        
        .mockup-title {
            font-size: 20px;
            font-weight: 200;
            margin-bottom: 20px;
            text-align: center;
            background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .watch-face {
            width: 240px;
            height: 240px;
            border-radius: 50%;
            position: relative;
            margin: 0 auto 20px auto;
            overflow: hidden;
        }
        
        /* Breathing Life - Organic Flow */
        .organic-flow {
            background: radial-gradient(circle at 30% 70%, #1a0a2e 0%, #16213e 50%, #0f3460 100%);
            border: 2px solid transparent;
            background-clip: padding-box;
            position: relative;
        }
        
        .organic-flow::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
            border-radius: 50%;
            z-index: -1;
            animation: pulse-border 4s ease-in-out infinite;
        }
        
        @keyframes pulse-border {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.02); }
        }
        
        .organic-flow .fluid-ring {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 210px;
            height: 210px;
            border-radius: 50%;
            background: conic-gradient(from 225deg, 
                #1e40af 0deg, 
                #3b82f6 60deg, 
                #10b981 120deg, 
                #f59e0b 180deg, 
                #ef4444 240deg, 
                #8b5cf6 300deg,
                #1e40af 360deg);
            mask: radial-gradient(circle, transparent 88px, black 95px, black 108px, transparent 115px);
            -webkit-mask: radial-gradient(circle, transparent 88px, black 95px, black 108px, transparent 115px);
            filter: blur(0.5px);
            animation: slow-rotate 20s linear infinite;
        }
        
        @keyframes slow-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .organic-flow .pulse-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .organic-flow .pulse-number {
            font-size: 54px;
            font-weight: 100;
            color: #ffffff;
            line-height: 0.9;
            text-shadow: 0 0 40px rgba(255,107,107,0.6);
            animation: breathe 3s ease-in-out infinite;
        }
        
        @keyframes breathe {
            0%, 100% { transform: scale(1); opacity: 0.9; }
            50% { transform: scale(1.05); opacity: 1; }
        }
        
        .organic-flow .pulse-label {
            font-size: 9px;
            color: #8088ff;
            letter-spacing: 4px;
            opacity: 0.7;
            font-weight: 300;
        }
        
        .organic-flow .floating-indicator {
            position: absolute;
            top: 150px;
            right: 92px;
            border-radius: 8px;
            font-size: 12px;
            color: #f64242;
        }
        
        /* Quantum Precision - Scientific Beauty */
        .quantum-precision {
            background: radial-gradient(circle at 60% 30%, #0d1421 0%, #1a1a2e 50%, #16213e 100%);
            border: 1px solid #2a3f5f;
            position: relative;
        }
        
        .quantum-precision .precision-grid {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-image: 
                radial-gradient(circle at center, transparent 2px, rgba(100,181,246,0.1) 2px, rgba(100,181,246,0.1) 4px, transparent 4px),
                conic-gradient(from 0deg, transparent 0deg, rgba(100,181,246,0.05) 1deg, transparent 2deg);
            background-size: 20px 20px, 360px 360px;
        }
        
        .quantum-precision .data-rings {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 216px;
            height: 216px;
            border-radius: 50%;
        }
        
        .quantum-precision .ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid transparent;
        }
        
        .quantum-precision .ring-1 {
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            background: linear-gradient(45deg, #64b5f6, transparent) padding-box;
            border-image: linear-gradient(45deg, #64b5f6, transparent) 1;
            animation: spin-slow 30s linear infinite;
        }
        
        .quantum-precision .ring-2 {
            top: 25px;
            left: 25px;
            right: 25px;
            bottom: 25px;
            background: linear-gradient(-45deg, #81c784, transparent) padding-box;
            border-image: linear-gradient(-45deg, #81c784, transparent) 1;
            animation: spin-slow 25s linear infinite reverse;
        }
        
        .quantum-precision .ring-3 {
            top: 40px;
            left: 40px;
            right: 40px;
            bottom: 40px;
            background: linear-gradient(90deg, #ffb74d, transparent) padding-box;
            border-image: linear-gradient(90deg, #ffb74d, transparent) 1;
            animation: spin-slow 20s linear infinite;
        }
        
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .quantum-precision .pulse-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
        }
        
        .quantum-precision .pulse-number {
            font-size: 48px;
            font-weight: 200;
            color: #e3f2fd;
            line-height: 1;
            font-family: 'SF Mono', Monaco, monospace;
            text-shadow: 0 0 20px rgba(227,242,253,0.4);
            letter-spacing: -2px;
        }
        
        .quantum-precision .pulse-label {
            font-size: 8px;
            color: #333639;
            letter-spacing: 6px;
            margin-top: 6px;
            font-family: 'SF Mono', Monaco, monospace;
            opacity: 0.8;
        }
        
        .quantum-precision .spo2-readout {
            position: absolute;
            bottom: 45px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'SF Mono', Monaco, monospace;
            text-align: center;
        }
        
        .quantum-precision .spo2-value {
            font-size: 16px;
            color: #e00060;
            opacity: 0.7;
            font-weight: 300;
        }
        
        .quantum-precision .spo2-label {
            font-size: 12px;
            color: #780069;
            opacity: 0.8;
            letter-spacing: 2px;
        }
        
        /* Liquid Metal - Futuristic Flow */
        .liquid-metal {
            background: radial-gradient(circle at 40% 60%, #0a0e1a 0%, #1a1a2e 60%, #2d1b69 100%);
            border: 2px solid #4a148c;
            position: relative;
            overflow: hidden;
        }
        
        .liquid-metal::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent, #7b1fa2, #4a148c, transparent);
            animation: liquid-rotate 8s linear infinite;
            opacity: 0.3;
        }
        
        @keyframes liquid-rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .liquid-metal .mercury-flow {
            position: absolute;
            top: 18px;
            left: 18px;
            width: 204px;
            height: 204px;
            border-radius: 50%;
            background: linear-gradient(135deg, 
                #c0392b 0%,
                #e74c3c 25%,
                #f39c12 50%,
                #f1c40f 75%,
                #27ae60 100%);
            mask: radial-gradient(circle, transparent 85px, black 90px, black 102px, transparent 107px);
            -webkit-mask: radial-gradient(circle, transparent 85px, black 90px, black 102px, transparent 107px);
            filter: blur(1px) saturate(1.2);
        }
        
        .liquid-metal .needle-assembly {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        
        .liquid-metal .needle {
            width: 3px;
            height: 85px;
            background: linear-gradient(to top, #ffffff 0%, #e1bee7 100%);
            transform-origin: bottom center;
            transform: rotate(65deg);
            border-radius: 2px;
            box-shadow: 0 0 15px rgba(255,255,255,0.8);
            position: relative;
            margin: 0 auto;
        }
        
        .liquid-metal .needle::after {
            content: '';
            position: absolute;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 8px solid #ffffff;
            filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
        }
        
        .liquid-metal .center-hub {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: radial-gradient(circle, #ffffff 0%, #e1bee7 100%);
            box-shadow: 0 0 20px rgba(255,255,255,0.6);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 15;
        }
        
        .liquid-metal .pulse-display {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 5;
        }
        
        .liquid-metal .pulse-number {
            font-size: 42px;
            font-weight: 100;
            color: #ffffff;
            line-height: 1;
            text-shadow: 0 0 30px rgba(255,255,255,0.5);
            filter: blur(0.3px);
        }
        
        .liquid-metal .pulse-label {
            font-size: 10px;
            color: #ce93d8;
            letter-spacing: 3px;
            margin-top: 4px;
            opacity: 0.8;
        }
        
        .liquid-metal .status-orb {
            position: absolute;
            bottom: 72px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: radial-gradient(circle, #00e676 0%, #00c853 100%);
            box-shadow: 0 0 25px #00e676;
            animation: status-pulse 2s ease-in-out infinite;
        }
        
        @keyframes status-pulse {
            0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
            50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
        }
        
        /* Zen Minimalism - Sophisticated Restraint */
        .zen-minimal {
            background: radial-gradient(circle at center, #121212 0%, #000000 100%);
            border: 1px solid #333333;
            position: relative;
        }
        
        .zen-minimal .golden-ratio-ring {
            position: absolute;
            top: 24px;
            left: 24px;
            width: 192px;
            height: 192px;
            border-radius: 50%;
            border: 1px solid rgba(255,193,7,0.3);
            background: conic-gradient(from 270deg, 
                transparent 0deg,
                rgba(255,193,7,0.1) 90deg,
                rgba(255,193,7,0.3) 162deg,
                rgba(255,87,34,0.4) 234deg,
                transparent 270deg);
        }
        
        .zen-minimal .zen-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .zen-minimal .pulse-number {
            font-size: 56px;
            font-weight: 100;
            color: #ffffff;
            line-height: 0.85;
            letter-spacing: -3px;
            opacity: 0.95;
        }
        
        .zen-minimal .pulse-accent {
            width: 40px;
            height: 1px;
            background: linear-gradient(to right, transparent, #ff5722, transparent);
            margin: 12px auto 8px auto;
            opacity: 0.7;
        }
        
        .zen-minimal .pulse-label {
            font-size: 9px;
            color: #ff5722;
            letter-spacing: 8px;
            opacity: 0.6;
            font-weight: 300;
        }
        
        .zen-minimal .spo2-whisper {
            position: absolute;
            top: 172px;
            right: 90px;
            text-orientation: mixed;
            font-size: 11px;
            color: #ffc107;
            opacity: 0.7;
            letter-spacing: 1px;
        }
        
        .zen-minimal .harmony-dot {
            position: absolute;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background: #ffc107;
            opacity: 0.5;
        }
        
        .zen-minimal .dot-1 { top: 60px; left: 60px; }
        .zen-minimal .dot-2 { top: 60px; right: 60px; }
        .zen-minimal .dot-3 { bottom: 60px; left: 60px; }
        .zen-minimal .dot-4 { bottom: 60px; right: 60px; }
        
        .description {
            font-size: 14px;
            color: #b0bec5;
            line-height: 1.5;
            margin-bottom: 15px;
        }
        
        .design-philosophy {
            background: rgba(255,255,255,0.05);
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
            border-left: 3px solid #ff6b6b;
        }
        
        .design-philosophy h4 {
            color: #ff8a80;
            margin: 0 0 10px 0;
            font-size: 14px;
            font-weight: 300;
        }
        
        .design-philosophy p {
            color: #cfd8dc;
            font-size: 12px;
            line-height: 1.4;
            margin: 0;
            font-style: italic;
        }
        
        .features {
            margin-top: 15px;
            font-size: 12px;
            color: #81c784;
        }
        
        .features ul {
            margin: 8px 0;
            padding-left: 18px;
        }
        
        .features li {
            margin: 5px 0;
            line-height: 1.3;
        }
    </style>
 </head>
 <body>
    <div class="hero-title">Dark Elegance × Artistic Vision</div>
    <div class="philosophy">"Good design is as little design as possible... but with soul." - Creative Health Monitoring Reimagined</div>
    
    <div class="mockup-grid">
        <!-- Breathing Life - Organic Flow -->
        <div class="mockup-container">
            <div class="mockup-title">Breathing Life</div>
            <div class="watch-face organic-flow">
                <div class="fluid-ring"></div>
                <div class="pulse-center">
                    <div class="pulse-number">72</div>
                    <div class="pulse-label">BPM</div>
                </div>
                <div class="floating-indicator">SpO₂ 98%</div>
            </div>
            <div class="description">
                Living, breathing interface that pulses with your heartbeat. The gradient ring slowly rotates, creating an organic, almost meditative experience. The border itself breathes with a subtle pulse animation.
            </div>
            <div class="design-philosophy">
                <h4>Design Philosophy</h4>
                <p>Health monitoring shouldn't feel clinical—it should feel alive. This design treats your vitals as flowing energy, creating an emotional connection to your wellbeing.</p>
            </div>
            <div class="features">
                <strong>Signature Elements:</strong>
                <ul>
                    <li>Animated breathing border that syncs with heart rate</li>
                    <li>Slowly rotating fluid gradient ring (20s cycle)</li>
                    <li>Floating glass-morphism SpO₂ indicator</li>
                    <li>Pulse number that breathes with 3s cycle</li>
                </ul>
            </div>
        </div>

        <!-- Quantum Precision - Scientific Beauty -->
        <div class="mockup-container">
            <div class="mockup-title">Quantum Precision</div>
            <div class="watch-face quantum-precision">
                <div class="precision-grid"></div>
                <div class="data-rings">
                    <div class="ring ring-1"></div>
                    <div class="ring ring-2"></div>
                    <div class="ring ring-3"></div>
                </div>
                <div class="pulse-center">
                    <div class="pulse-number">72</div>
                    <div class="pulse-label">BPM</div>
                </div>
                <div class="spo2-readout">
                    <div class="spo2-value">98%</div>
                    <div class="spo2-label">SpO₂</div>
                </div>
            </div>
            <div class="description">
                Scientific precision meets artistic beauty. Multiple data rings rotate at different speeds, creating complex interference patterns. Monospace typography suggests precision instrumentation, while the subtle grid adds depth.
            </div>
            <div class="design-philosophy">
                <h4>Design Philosophy</h4>
                <p>Inspired by particle physics visualizations and scientific instruments. Beauty emerges from precision, complexity from simplicity. Every element serves both function and visual harmony.</p>
            </div>
            <div class="features">
                <strong>Signature Elements:</strong>
                <ul>
                    <li>Counter-rotating data rings at different speeds</li>
                    <li>Subtle radial grid pattern for depth</li>
                    <li>Monospace typography for scientific accuracy</li>
                    <li>Interference patterns created by ring interactions</li>
                </ul>
            </div>
        </div>

        <!-- Liquid Metal - Futuristic Flow -->
        <div class="mockup-container">
            <div class="mockup-title">Liquid Metal</div>
            <div class="watch-face liquid-metal">
                <div class="mercury-flow"></div>
                <div class="needle-assembly">
                    <div class="needle"></div>
                </div>
                <div class="pulse-display">
                    <div class="pulse-number">72</div>
                    <div class="pulse-label">BPM</div>
                </div>
                <div class="status-orb"></div>
            </div>
            <div class="description">
                Futuristic liquid metal aesthetic with a precision needle that moves through a flowing gradient spectrum. The entire interface feels molten and alive, with subtle rotating background effects and a glowing status orb.
            </div>
            <div class="design-philosophy">
                <h4>Design Philosophy</h4>
                <p>What if health monitoring technology was liquid? This design explores fluidity, transformation, and the boundary between organic and synthetic. The needle becomes a precision instrument in a sea of flowing data.</p>
            </div>
            <div class="features">
                <strong>Signature Elements:</strong>
                <ul>
                    <li>Liquid mercury-style SpO₂ flow gradient</li>
                    <li>Precision needle with arrow tip and glow effect</li>
                    <li>Rotating liquid metal background pattern</li>
                    <li>Pulsing status orb with energy emanation</li>
                </ul>
            </div>
        </div>

        <!-- Zen Minimalism - Sophisticated Restraint -->
        <div class="mockup-container">
            <div class="mockup-title">Zen Minimalism</div>
            <div class="watch-face zen-minimal">
                <div class="golden-ratio-ring"></div>
                <div class="zen-center">
                    <div class="pulse-number">72</div>
                    <div class="pulse-accent"></div>
                    <div class="pulse-label">BPM</div>
                </div>
                <div class="spo2-whisper">SpO₂ 98%</div>
                <div class="harmony-dot dot-1"></div>
                <div class="harmony-dot dot-2"></div>
                <div class="harmony-dot dot-3"></div>
                <div class="harmony-dot dot-4"></div>
            </div>
            <div class="description">
                Pure minimalism with golden ratio proportions. Vertical SpO₂ text adds unexpected elegance. The gradient ring follows mathematical beauty principles, while tiny harmony dots create perfect balance in the corners.
            </div>
            <div class="design-philosophy">
                <h4>Design Philosophy</h4>
                <p>Less is more, but more is hidden within less. Every element follows golden ratio proportions. The design whispers rather than shouts, creating a meditative experience that reduces anxiety around health monitoring.</p>
            </div>
            <div class="features">
                <strong>Signature Elements:</strong>
                <ul>
                    <li>Golden ratio proportioned elements</li>
                    <li>Vertical SpO₂ text for unexpected elegance</li>
                    <li>Subtle gradient accent line</li>
                    <li>Four harmony dots for perfect corner balance</li>
                </ul>
            </div>
        </div>
    </div>

    <div style="margin-top: 50px; padding: 25px; background: rgba(255,255,255,0.02); border-radius: 15px; border: 1px solid rgba(255,255,255,0.08);">
        <h3 style="color: #ff8a80; margin-bottom: 20px; font-weight: 200;">Artistic Direction Notes</h3>
        <div style="color: #cfd8dc; line-height: 1.6; font-size: 14px;">
            <p><strong>Emotional Design:</strong> Each variation evokes different feelings—organic flow for connection, quantum precision for trust, liquid metal for innovation, zen minimalism for peace.</p>
            <p><strong>Animation Philosophy:</strong> Motion should feel purposeful, not decorative. Every animation relates to the human body's rhythms or data visualization principles.</p>
            <p><strong>Color Psychology:</strong> Warm colors (red/orange) for pulse create urgency and life. Cool colors (blue/green) for SpO₂ suggest clinical precision and calm.</p>
            <p><strong>Typography as Art:</strong> Font weight and spacing become sculptural elements. Negative space is as important as positive space.</p>
            <p><strong>Signature Constraint:</strong> Each design has one distinctive element that makes it immediately recognizable—this becomes your design signature.</p>
        </div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dark Elegance Health Monitor - Artistic Variations</title>
	<style>
	body {
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
	color: white;
	margin: 0;
	padding: 20px;
	min-height: 100vh;
	}

	.hero-title {
	text-align: center;
	font-size: 32px;
	font-weight: 100;
	color: #ffffff;
	margin: 20px 0 40px 0;
	letter-spacing: -0.5px;
	}

	.philosophy {
	text-align: center;
	font-style: italic;
	color: #888;
	margin-bottom: 50px;
	font-size: 14px;
	}

	.mockup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 40px;
	margin: 20px 0;
	}

	.mockup-container {
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 20px;
	padding: 25px;
	backdrop-filter: blur(20px);
	transition: all 0.3s ease;
	}

	.mockup-container:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
	}

	.mockup-title {
	font-size: 20px;
	font-weight: 200;
	margin-bottom: 20px;
	text-align: center;
	background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6bcf7f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.watch-face {
	width: 240px;
	height: 240px;
	border-radius: 50%;
	position: relative;
	margin: 0 auto 20px auto;
	overflow: hidden;
	}

	/* Breathing Life - Organic Flow */
	.organic-flow {
	background: radial-gradient(circle at 30% 70%, #1a0a2e 0%, #16213e 50%, #0f3460 100%);
	border: 2px solid transparent;
	background-clip: padding-box;
	position: relative;
	}

	.organic-flow::before {
	content: '';
	position: absolute;
	inset: -2px;
	background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
	border-radius: 50%;
	z-index: -1;
	animation: pulse-border 4s ease-in-out infinite;
	}

	@keyframes pulse-border {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.02); }
	}

	.organic-flow .fluid-ring {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: conic-gradient(from 225deg,
	#1e40af 0deg,
	#3b82f6 60deg,
	#10b981 120deg,
	#f59e0b 180deg,
	#ef4444 240deg,
	#8b5cf6 300deg,
	#1e40af 360deg);
	mask: radial-gradient(circle, transparent 88px, black 95px, black 108px, transparent 115px);
	-webkit-mask: radial-gradient(circle, transparent 88px, black 95px, black 108px, transparent 115px);
	filter: blur(0.5px);
	animation: slow-rotate 20s linear infinite;
	}

	@keyframes slow-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}

	.organic-flow .pulse-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	}

	.organic-flow .pulse-number {
	font-size: 54px;
	font-weight: 100;
	color: #ffffff;
	line-height: 0.9;
	text-shadow: 0 0 40px rgba(255,107,107,0.6);
	animation: breathe 3s ease-in-out infinite;
	}

	@keyframes breathe {
	0%, 100% { transform: scale(1); opacity: 0.9; }
	50% { transform: scale(1.05); opacity: 1; }
	}

	.organic-flow .pulse-label {
	font-size: 9px;
	color: #8088ff;
	letter-spacing: 4px;
	opacity: 0.7;
	font-weight: 300;
	}

	.organic-flow .floating-indicator {
	position: absolute;
	top: 150px;
	right: 92px;
	border-radius: 8px;
	font-size: 12px;
	color: #f64242;
	}

	/* Quantum Precision - Scientific Beauty */
	.quantum-precision {
	background: radial-gradient(circle at 60% 30%, #0d1421 0%, #1a1a2e 50%, #16213e 100%);
	border: 1px solid #2a3f5f;
	position: relative;
	}

	.quantum-precision .precision-grid {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-image:
	radial-gradient(circle at center, transparent 2px, rgba(100,181,246,0.1) 2px, rgba(100,181,246,0.1) 4px, transparent 4px),
	conic-gradient(from 0deg, transparent 0deg, rgba(100,181,246,0.05) 1deg, transparent 2deg);
	background-size: 20px 20px, 360px 360px;
	}

	.quantum-precision .data-rings {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 216px;
	height: 216px;
	border-radius: 50%;
	}

	.quantum-precision .ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid transparent;
	}

	.quantum-precision .ring-1 {
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background: linear-gradient(45deg, #64b5f6, transparent) padding-box;
	border-image: linear-gradient(45deg, #64b5f6, transparent) 1;
	animation: spin-slow 30s linear infinite;
	}

	.quantum-precision .ring-2 {
	top: 25px;
	left: 25px;
	right: 25px;
	bottom: 25px;
	background: linear-gradient(-45deg, #81c784, transparent) padding-box;
	border-image: linear-gradient(-45deg, #81c784, transparent) 1;
	animation: spin-slow 25s linear infinite reverse;
	}

	.quantum-precision .ring-3 {
	top: 40px;
	left: 40px;
	right: 40px;
	bottom: 40px;
	background: linear-gradient(90deg, #ffb74d, transparent) padding-box;
	border-image: linear-gradient(90deg, #ffb74d, transparent) 1;
	animation: spin-slow 20s linear infinite;
	}

	@keyframes spin-slow {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}

	.quantum-precision .pulse-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 10;
	}

	.quantum-precision .pulse-number {
	font-size: 48px;
	font-weight: 200;
	color: #e3f2fd;
	line-height: 1;
	font-family: 'SF Mono', Monaco, monospace;
	text-shadow: 0 0 20px rgba(227,242,253,0.4);
	letter-spacing: -2px;
	}

	.quantum-precision .pulse-label {
	font-size: 8px;
	color: #333639;
	letter-spacing: 6px;
	margin-top: 6px;
	font-family: 'SF Mono', Monaco, monospace;
	opacity: 0.8;
	}

	.quantum-precision .spo2-readout {
	position: absolute;
	bottom: 45px;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'SF Mono', Monaco, monospace;
	text-align: center;
	}

	.quantum-precision .spo2-value {
	font-size: 16px;
	color: #e00060;
	opacity: 0.7;
	font-weight: 300;
	}

	.quantum-precision .spo2-label {
	font-size: 12px;
	color: #780069;
	opacity: 0.8;
	letter-spacing: 2px;
	}

	/* Liquid Metal - Futuristic Flow */
	.liquid-metal {
	background: radial-gradient(circle at 40% 60%, #0a0e1a 0%, #1a1a2e 60%, #2d1b69 100%);
	border: 2px solid #4a148c;
	position: relative;
	overflow: hidden;
	}

	.liquid-metal::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(from 0deg, transparent, #7b1fa2, #4a148c, transparent);
	animation: liquid-rotate 8s linear infinite;
	opacity: 0.3;
	}

	@keyframes liquid-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}

	.liquid-metal .mercury-flow {
	position: absolute;
	top: 18px;
	left: 18px;
	width: 204px;
	height: 204px;
	border-radius: 50%;
	background: linear-gradient(135deg,
	#c0392b 0%,
	#e74c3c 25%,
	#f39c12 50%,
	#f1c40f 75%,
	#27ae60 100%);
	mask: radial-gradient(circle, transparent 85px, black 90px, black 102px, transparent 107px);
	-webkit-mask: radial-gradient(circle, transparent 85px, black 90px, black 102px, transparent 107px);
	filter: blur(1px) saturate(1.2);
	}

	.liquid-metal .needle-assembly {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	}

	.liquid-metal .needle {
	width: 3px;
	height: 85px;
	background: linear-gradient(to top, #ffffff 0%, #e1bee7 100%);
	transform-origin: bottom center;
	transform: rotate(65deg);
	border-radius: 2px;
	box-shadow: 0 0 15px rgba(255,255,255,0.8);
	position: relative;
	margin: 0 auto;
	}

	.liquid-metal .needle::after {
	content: '';
	position: absolute;
	top: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 8px solid #ffffff;
	filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
	}

	.liquid-metal .center-hub {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, #ffffff 0%, #e1bee7 100%);
	box-shadow: 0 0 20px rgba(255,255,255,0.6);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 15;
	}

	.liquid-metal .pulse-display {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	z-index: 5;
	}

	.liquid-metal .pulse-number {
	font-size: 42px;
	font-weight: 100;
	color: #ffffff;
	line-height: 1;
	text-shadow: 0 0 30px rgba(255,255,255,0.5);
	filter: blur(0.3px);
	}

	.liquid-metal .pulse-label {
	font-size: 10px;
	color: #ce93d8;
	letter-spacing: 3px;
	margin-top: 4px;
	opacity: 0.8;
	}

	.liquid-metal .status-orb {
	position: absolute;
	bottom: 72px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle, #00e676 0%, #00c853 100%);
	box-shadow: 0 0 25px #00e676;
	animation: status-pulse 2s ease-in-out infinite;
	}

	@keyframes status-pulse {
	0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
	50% { transform: translateX(-50%) scale(1.2); opacity: 0.7; }
	}

	/* Zen Minimalism - Sophisticated Restraint */
	.zen-minimal {
	background: radial-gradient(circle at center, #121212 0%, #000000 100%);
	border: 1px solid #333333;
	position: relative;
	}

	.zen-minimal .golden-ratio-ring {
	position: absolute;
	top: 24px;
	left: 24px;
	width: 192px;
	height: 192px;
	border-radius: 50%;
	border: 1px solid rgba(255,193,7,0.3);
	background: conic-gradient(from 270deg,
	transparent 0deg,
	rgba(255,193,7,0.1) 90deg,
	rgba(255,193,7,0.3) 162deg,
	rgba(255,87,34,0.4) 234deg,
	transparent 270deg);
	}

	.zen-minimal .zen-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	}

	.zen-minimal .pulse-number {
	font-size: 56px;
	font-weight: 100;
	color: #ffffff;
	line-height: 0.85;
	letter-spacing: -3px;
	opacity: 0.95;
	}

	.zen-minimal .pulse-accent {
	width: 40px;
	height: 1px;
	background: linear-gradient(to right, transparent, #ff5722, transparent);
	margin: 12px auto 8px auto;
	opacity: 0.7;
	}

	.zen-minimal .pulse-label {
	font-size: 9px;
	color: #ff5722;
	letter-spacing: 8px;
	opacity: 0.6;
	font-weight: 300;
	}

	.zen-minimal .spo2-whisper {
	position: absolute;
	top: 172px;
	right: 90px;
	text-orientation: mixed;
	font-size: 11px;
	color: #ffc107;
	opacity: 0.7;
	letter-spacing: 1px;
	}

	.zen-minimal .harmony-dot {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #ffc107;
	opacity: 0.5;
	}

	.zen-minimal .dot-1 { top: 60px; left: 60px; }
	.zen-minimal .dot-2 { top: 60px; right: 60px; }
	.zen-minimal .dot-3 { bottom: 60px; left: 60px; }
	.zen-minimal .dot-4 { bottom: 60px; right: 60px; }

	.description {
	font-size: 14px;
	color: #b0bec5;
	line-height: 1.5;
	margin-bottom: 15px;
	}

	.design-philosophy {
	background: rgba(255,255,255,0.05);
	border-radius: 10px;
	padding: 15px;
	margin-top: 15px;
	border-left: 3px solid #ff6b6b;
	}

	.design-philosophy h4 {
	color: #ff8a80;
	margin: 0 0 10px 0;
	font-size: 14px;
	font-weight: 300;
	}

	.design-philosophy p {
	color: #cfd8dc;
	font-size: 12px;
	line-height: 1.4;
	margin: 0;
	font-style: italic;
	}

	.features {
	margin-top: 15px;
	font-size: 12px;
	color: #81c784;
	}

	.features ul {
	margin: 8px 0;
	padding-left: 18px;
	}

	.features li {
	margin: 5px 0;
	line-height: 1.3;
	}
	</style>
	</head>
	<body>
	<div class="hero-title">Dark Elegance × Artistic Vision</div>
	<div class="philosophy">"Good design is as little design as possible... but with soul." - Creative Health Monitoring Reimagined</div>

	<div class="mockup-grid">
	<!-- Breathing Life - Organic Flow -->
	<div class="mockup-container">
	<div class="mockup-title">Breathing Life</div>
	<div class="watch-face organic-flow">
	<div class="fluid-ring"></div>
	<div class="pulse-center">
	<div class="pulse-number">72</div>
	<div class="pulse-label">BPM</div>
	</div>
	<div class="floating-indicator">SpO₂ 98%</div>
	</div>
	<div class="description">
	Living, breathing interface that pulses with your heartbeat. The gradient ring slowly rotates, creating an organic, almost meditative experience. The border itself breathes with a subtle pulse animation.
	</div>
	<div class="design-philosophy">
	<h4>Design Philosophy</h4>
	<p>Health monitoring shouldn't feel clinical—it should feel alive. This design treats your vitals as flowing energy, creating an emotional connection to your wellbeing.</p>
	</div>
	<div class="features">
	<strong>Signature Elements:</strong>
	<ul>
	<li>Animated breathing border that syncs with heart rate</li>
	<li>Slowly rotating fluid gradient ring (20s cycle)</li>
	<li>Floating glass-morphism SpO₂ indicator</li>
	<li>Pulse number that breathes with 3s cycle</li>
	</ul>
	</div>
	</div>

	<!-- Quantum Precision - Scientific Beauty -->
	<div class="mockup-container">
	<div class="mockup-title">Quantum Precision</div>
	<div class="watch-face quantum-precision">
	<div class="precision-grid"></div>
	<div class="data-rings">
	<div class="ring ring-1"></div>
	<div class="ring ring-2"></div>
	<div class="ring ring-3"></div>
	</div>
	<div class="pulse-center">
	<div class="pulse-number">72</div>
	<div class="pulse-label">BPM</div>
	</div>
	<div class="spo2-readout">
	<div class="spo2-value">98%</div>
	<div class="spo2-label">SpO₂</div>
	</div>
	</div>
	<div class="description">
	Scientific precision meets artistic beauty. Multiple data rings rotate at different speeds, creating complex interference patterns. Monospace typography suggests precision instrumentation, while the subtle grid adds depth.
	</div>
	<div class="design-philosophy">
	<h4>Design Philosophy</h4>
	<p>Inspired by particle physics visualizations and scientific instruments. Beauty emerges from precision, complexity from simplicity. Every element serves both function and visual harmony.</p>
	</div>
	<div class="features">
	<strong>Signature Elements:</strong>
	<ul>
	<li>Counter-rotating data rings at different speeds</li>
	<li>Subtle radial grid pattern for depth</li>
	<li>Monospace typography for scientific accuracy</li>
	<li>Interference patterns created by ring interactions</li>
	</ul>
	</div>
	</div>

	<!-- Liquid Metal - Futuristic Flow -->
	<div class="mockup-container">
	<div class="mockup-title">Liquid Metal</div>
	<div class="watch-face liquid-metal">
	<div class="mercury-flow"></div>
	<div class="needle-assembly">
	<div class="needle"></div>
	</div>
	<div class="pulse-display">
	<div class="pulse-number">72</div>
	<div class="pulse-label">BPM</div>
	</div>
	<div class="status-orb"></div>
	</div>
	<div class="description">
	Futuristic liquid metal aesthetic with a precision needle that moves through a flowing gradient spectrum. The entire interface feels molten and alive, with subtle rotating background effects and a glowing status orb.
	</div>
	<div class="design-philosophy">
	<h4>Design Philosophy</h4>
	<p>What if health monitoring technology was liquid? This design explores fluidity, transformation, and the boundary between organic and synthetic. The needle becomes a precision instrument in a sea of flowing data.</p>
	</div>
	<div class="features">
	<strong>Signature Elements:</strong>
	<ul>
	<li>Liquid mercury-style SpO₂ flow gradient</li>
	<li>Precision needle with arrow tip and glow effect</li>
	<li>Rotating liquid metal background pattern</li>
	<li>Pulsing status orb with energy emanation</li>
	</ul>
	</div>
	</div>

	<!-- Zen Minimalism - Sophisticated Restraint -->
	<div class="mockup-container">
	<div class="mockup-title">Zen Minimalism</div>
	<div class="watch-face zen-minimal">
	<div class="golden-ratio-ring"></div>
	<div class="zen-center">
	<div class="pulse-number">72</div>
	<div class="pulse-accent"></div>
	<div class="pulse-label">BPM</div>
	</div>
	<div class="spo2-whisper">SpO₂ 98%</div>
	<div class="harmony-dot dot-1"></div>
	<div class="harmony-dot dot-2"></div>
	<div class="harmony-dot dot-3"></div>
	<div class="harmony-dot dot-4"></div>
	</div>
	<div class="description">
	Pure minimalism with golden ratio proportions. Vertical SpO₂ text adds unexpected elegance. The gradient ring follows mathematical beauty principles, while tiny harmony dots create perfect balance in the corners.
	</div>
	<div class="design-philosophy">
	<h4>Design Philosophy</h4>
	<p>Less is more, but more is hidden within less. Every element follows golden ratio proportions. The design whispers rather than shouts, creating a meditative experience that reduces anxiety around health monitoring.</p>
	</div>
	<div class="features">
	<strong>Signature Elements:</strong>
	<ul>
	<li>Golden ratio proportioned elements</li>
	<li>Vertical SpO₂ text for unexpected elegance</li>
	<li>Subtle gradient accent line</li>
	<li>Four harmony dots for perfect corner balance</li>
	</ul>
	</div>
	</div>
	</div>

	<div style="margin-top: 50px; padding: 25px; background: rgba(255,255,255,0.02); border-radius: 15px; border: 1px solid rgba(255,255,255,0.08);">
	<h3 style="color: #ff8a80; margin-bottom: 20px; font-weight: 200;">Artistic Direction Notes</h3>
	<div style="color: #cfd8dc; line-height: 1.6; font-size: 14px;">
	<p><strong>Emotional Design:</strong> Each variation evokes different feelings—organic flow for connection, quantum precision for trust, liquid metal for innovation, zen minimalism for peace.</p>
	<p><strong>Animation Philosophy:</strong> Motion should feel purposeful, not decorative. Every animation relates to the human body's rhythms or data visualization principles.</p>
	<p><strong>Color Psychology:</strong> Warm colors (red/orange) for pulse create urgency and life. Cool colors (blue/green) for SpO₂ suggest clinical precision and calm.</p>
	<p><strong>Typography as Art:</strong> Font weight and spacing become sculptural elements. Negative space is as important as positive space.</p>
	<p><strong>Signature Constraint:</strong> Each design has one distinctive element that makes it immediately recognizable—this becomes your design signature.</p>
	</div>
	</div>
	</body>
	</html>