style.css

:root { --bg: #050505; --accent: #00ffcc; --error: #ff4d4d; --window: #111; }
body { background: var(--bg); color: #eee; font-family: 'Inter', sans-serif; margin: 0; overflow: hidden; height: 100vh; }

/* ATMOSPHERE */
.scanlines { position: fixed; top:0; left:0; width:100%; height:100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); z-index: 1000; background-size: 100% 4px, 3px 100%; pointer-events: none; }
@keyframes flicker { 0% { opacity: 0.9; } 5% { opacity: 0.8; } 10% { opacity: 0.9; } 100% { opacity: 1; } }
.desktop { animation: flicker 0.1s infinite; }

#boot-screen { position: fixed; width: 100%; height: 100%; background: black; z-index: 2000; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.boot-text { font-family: 'JetBrains Mono'; color: var(--accent); font-size: 0.8rem; line-height: 2; padding: 20px; }

.taskbar { position: fixed; top: 0; width: 100%; height: 30px; background: #000; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; font-family: 'JetBrains Mono'; font-size: 0.6rem; color: var(--accent); z-index: 100; box-sizing: border-box; }

.icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 60px; padding: 20px; max-width: 300px; }
.icon { display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: 0.7; }
.icon:hover { opacity: 1; }
.icon span { font-size: 0.6rem; margin-top: 8px; color: #666; text-transform: uppercase; letter-spacing: 2px; }

.window { position: absolute; top: 10%; left: 5%; width: 90%; height: 80%; background: var(--window); border: 1px solid #333; display: flex; flex-direction: column; z-index: 50; }
.window-header { background: #1a1a1a; padding: 8px; display: flex; justify-content: space-between; font-size: 0.6rem; font-family: 'JetBrains Mono'; color: #444; }
.window-content { flex: 1; overflow-y: auto; padding: 15px; }

.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photo-item { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #222; filter: brightness(0.7) contrast(1.2); }

.chat-bubble { background: #000; padding: 10px; border-radius: 4px; margin-bottom: 10px; font-size: 0.75rem; border-left: 2px solid var(--accent); line-height: 1.4; }

#progress-bar-container { width: 100%; height: 4px; background: #222; margin-top: 20px; display: none; }
#progress-bar { width: 0%; height: 100%; background: var(--accent); }

.final-box { background: #fffbe6; color: #000; padding: 25px; border-radius: 4px; font-size: 0.9rem; line-height: 1.6; }
.hidden { display: none !important; }
.glass-overlay { position: fixed; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); z-index: 500; display: none; flex-direction: column; align-items: center; justify-content: center; }