/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Dec 17 2025 | 19:15:02 */
<style>
/* --- STYLING BAZOWY (Dark Mode + Neon Cyan) --- */
.ri-container { font-family: 'Inter', sans-serif; color: #ccc; line-height: 1.6; max-width: 100%; }
.ri-container strong { color: #fff; font-weight: 700; }
.ri-container h2 { color: #fff; font-size: 1.5rem; margin: 3rem 0 1.5rem 0; border-left: 4px solid #00DDFF; padding-left: 15px; text-transform: uppercase; letter-spacing: 1px; }
.ri-container p { margin-bottom: 20px; text-align: justify; }

/* --- 1. SPEEDOMETER --- */
.ri-speed-box { background: #0a0a0a; border: 1px solid #222; padding: 25px; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.ri-speed-title { font-size: 0.85rem; color: #888; text-transform: uppercase; margin-bottom: 15px; display: block; letter-spacing: 2px; font-weight: 800; }
.ri-speed-track { width: 100%; height: 6px; background: linear-gradient(90deg, #4CAF50 0%, #FFC107 40%, #F44336 80%, #00DDFF 100%); border-radius: 4px; position: relative; margin-top: 10px; opacity: 0.8; }
.ri-speed-marker { width: 2px; height: 18px; background: #fff; position: absolute; top: -6px; z-index: 2; box-shadow: 0 0 15px #fff; }
.ri-speed-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: #555; margin-top: 12px; text-transform: uppercase; font-weight: bold; }

/* --- 2. TECH GRID --- */
.ri-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 15px; margin-bottom: 40px; }
.ri-tech-item { background: linear-gradient(145deg, #111, #0d0d0d); padding: 20px 10px; border-radius: 8px; border: 1px solid #222; text-align: center; transition: 0.3s; }
.ri-tech-item:hover { border-color: #00DDFF; transform: translateY(-2px); }
.ri-tech-label { display: block; font-size: 0.65rem; color: #666; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }
.ri-tech-value { display: block; font-size: 0.95rem; color: #fff; font-weight: bold; }

/* --- 3. EVOLUTION VISUALIZER (Glass Edition) --- */
.ri-visual-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-bottom: 40px; }
.ri-vis-card { background: #0f0f0f; border: 1px solid #222; border-radius: 8px; padding: 20px; position: relative; overflow: hidden; }
.ri-vis-title { color: #fff; font-size: 1rem; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; display: flex; justify-content: space-between; }
.ri-vis-subtitle { font-size: 0.7rem; color: #666; text-transform: uppercase; margin-bottom: 20px; display: block; }
.ri-anim-track { width: 100%; height: 4px; background: #1a1a1a; border-radius: 2px; margin-bottom: 15px; position: relative; overflow: hidden; }
.ri-cursor { width: 24px; height: 100%; background: #444; border-radius: 2px; position: absolute; top: 0; left: 0; }

/* Animacje dla Szkła */
.cursor-glass { background: #00DDFF; box-shadow: 0 0 10px #00DDFF; }
.anim-cloth { animation: slideCloth 3s infinite ease-in-out; } /* Wolno */
.anim-hybrid { animation: slideHybrid 2s infinite cubic-bezier(0.4, 0.0, 0.2, 1); } /* Szybciej */
.anim-glass { animation: slideGlass 0.8s infinite linear; } /* INSTANT */

@keyframes slideCloth { 0%, 100% { left: 0; } 50% { left: 80%; } }
@keyframes slideHybrid { 0%, 100% { left: 0; } 50% { left: 90%; } }
@keyframes slideGlass { 0% { left: -20%; } 100% { left: 110%; } } /* Przelatuje bez oporu */

.ri-vis-desc { font-size: 0.8rem; color: #999; line-height: 1.4; }
.ri-highlight { color: #00DDFF; font-weight: bold; }

/* --- LISTY --- */
.ri-features li { margin-bottom: 15px; padding-left: 25px; position: relative; color: #bbb; }
.ri-features li::before { content: "✦"; color: #00DDFF; position: absolute; left: 0; font-size: 1em; top: 1px; }
</style>