.controls display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
// --- State --- let currentBlur = 8; // default px let glowActive = false; let originalBorderStyle = ''; Blur PC
/* floating preview card (simulates an open app window) */ .floating-window background: rgba(30, 34, 58, 0.75); backdrop-filter: blur(20px); border-radius: 24px; padding: 1rem 1.4rem; margin-top: 2rem; border: 1px solid rgba(255,255,240,0.2); box-shadow: 0 12px 28px rgba(0,0,0,0.5); transition: all 0.2s; .controls display: flex
<!-- Desktop Area: background layer that gets blurred --> <div class="desktop-area" id="desktopArea"> <div class="desktop-content"> <!-- classic desktop shortcuts / icons --> <div class="icon-group" id="docIcon"> <div class="icon-emoji">📁</div> <div class="icon-label">Documents</div> </div> <div class="icon-group" id="photoIcon"> <div class="icon-emoji">🖼️</div> <div class="icon-label">Gallery</div> </div> <div class="icon-group" id="settingsIcon"> <div class="icon-emoji">⚙️</div> <div class="icon-label">Blur FX</div> </div> <div class="icon-group" id="browserIcon"> <div class="icon-emoji">🌐</div> <div class="icon-label">Web Canvas</div> </div> <div class="icon-group" id="terminalIcon"> <div class="icon-emoji">💻</div> <div class="icon-label">Terminal</div> </div> </div> let originalBorderStyle = ''
@keyframes subtlePulse 0% opacity: 0.7; 100% opacity: 1;
.blur-badge span font-weight: bold; font-size: 1rem;
.reset-btn background: rgba(255, 80, 120, 0.2); border: 1px solid #ff7795; color: #ffb7c7; padding: 6px 14px; border-radius: 40px; font-weight: 600; font-size: 0.75rem; cursor: pointer; transition: 0.2s; backdrop-filter: blur(4px);