:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0f1923;color:#fafafa}#root{display:flex;flex-direction:column;min-height:100vh}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1.5rem;background:linear-gradient(180deg,#0f1923,#162230)}.header{text-align:center;margin-bottom:1.5rem}.header h1{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{margin:.25rem 0 0;color:#ffffff80;font-size:.85rem}.progress-bar{width:100%;max-width:600px;display:flex;gap:.5rem;margin-bottom:1.5rem}.progress-step{flex:1;height:6px;border-radius:3px;background:#ffffff1a;overflow:hidden;transition:background .3s}.progress-step.done{background:#22c55e}.progress-step.active{background:#fff3;position:relative}.progress-step.active:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#f59e0b,#22c55e);border-radius:3px;animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.5}50%{opacity:1}}.game-area{width:100%;max-width:600px;flex:1;display:flex;flex-direction:column;align-items:center}.step-intro{text-align:center;padding:2.5rem 2rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:1rem;width:100%;max-width:500px}.step-intro .step-icon{font-size:3.5rem;margin-bottom:1rem}.step-intro h2{margin:0 0 .5rem;font-size:1.4rem;font-weight:700}.step-intro p{margin:0 0 1.5rem;color:#ffffff8c;font-size:.9rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.75rem;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}.btn-primary{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px #f59e0b4d}.btn-primary:active{transform:translateY(0)}.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 20px #22c55e4d}.mini-game{width:100%;max-width:500px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.mini-game h3{margin:0;font-size:1.2rem;font-weight:700;text-align:center}.mini-game .instructions{color:#ffffff80;font-size:.85rem;text-align:center;margin:0}.patch-zone{width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#2d2d2d,#1a1a1a 70%);border:3px solid #444;position:relative;overflow:hidden;cursor:crosshair}.patch-zone .tire-inner{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border-radius:50%;border:8px solid #333;background:#111}.patch-zone .hole{position:absolute;width:24px;height:24px;border-radius:50%;background:#000;border:2px solid #555;box-shadow:inset 0 0 8px #000c;transition:all .2s}.patch-zone .hole.patched{background:#f59e0b;border-color:#fbbf24;box-shadow:0 0 12px #f59e0b80}.patch-counter{font-size:.9rem;color:#fff9}.chain-track{width:100%;height:60px;background:#ffffff0d;border-radius:.5rem;position:relative;border:1px solid rgba(255,255,255,.1)}.chain-track .chain-line{position:absolute;top:50%;left:10%;right:10%;height:4px;background:#555;transform:translateY(-50%);border-radius:2px}.chain-track .sweet-spot{position:absolute;top:50%;height:40px;width:50px;transform:translate(-50%,-50%);background:#22c55e26;border:2px solid rgba(34,197,94,.4);border-radius:.25rem}.chain-handle{position:absolute;top:50%;width:20px;height:50px;background:linear-gradient(180deg,#f59e0b,#d97706);border-radius:.25rem;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 2px 8px #0000004d}.chain-handle:active{cursor:grabbing}.tension-display{font-size:1.4rem;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.brake-game-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.brake-rim{width:220px;height:220px;border-radius:50%;border:8px solid #555;position:relative;background:radial-gradient(circle,transparent 60%,#222 100%)}.brake-rim .center-hub{position:absolute;top:50%;left:50%;width:40px;height:40px;border-radius:50%;background:#444;border:3px solid #666;transform:translate(-50%,-50%)}.brake-pad{position:absolute;width:30px;height:14px;background:#ef4444;border-radius:3px;cursor:pointer;transition:left .1s;box-shadow:0 0 8px #ef44444d}.brake-pad.aligned{background:#22c55e;box-shadow:0 0 12px #22c55e80}.brake-controls{display:flex;gap:.5rem;align-items:center}.brake-controls .side-label{font-size:.8rem;color:#ffffff80;width:60px;text-align:center}.slider-control{display:flex;flex-direction:column;align-items:center;gap:.25rem}.slider-control input[type=range]{width:150px;accent-color:#f59e0b}.slider-value{font-size:.75rem;font-family:ui-monospace,monospace;color:#ffffff80}.pump-area{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.tire-display{width:180px;height:180px;border-radius:50%;border:12px solid #444;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .3s}.tire-display .psi-value{font-size:2rem;font-weight:800;font-family:ui-monospace,monospace}.tire-display .psi-label{font-size:.75rem;color:#fff6;position:absolute;bottom:30px}.tire-display.low{border-color:#ef4444}.tire-display.good{border-color:#22c55e}.tire-display.over{border-color:#f59e0b}.pump-button{width:140px;height:140px;border-radius:50%;border:4px solid #f59e0b;background:#f59e0b1a;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;font-family:inherit;transition:all .1s;color:#f59e0b;font-weight:700;font-size:1rem}.pump-button:hover{background:#f59e0b33}.pump-button:active{transform:scale(.95);background:#f59e0b4d}.pump-button .pump-icon{font-size:2rem}.pump-target{font-size:.85rem;color:#ffffff80}.oil-track-container{width:100%;position:relative}.oil-track{width:100%;height:200px;position:relative;cursor:crosshair}.oil-track svg{width:100%;height:100%}.oil-path-bg{fill:none;stroke:#333;stroke-width:20;stroke-linecap:round}.oil-path-progress{fill:none;stroke:#f59e0b;stroke-width:16;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(245,158,11,.5))}.oil-dot{fill:#22c55e;filter:drop-shadow(0 0 4px rgba(34,197,94,.6))}.oil-progress-text{font-size:.9rem;color:#fff9;text-align:center}.success-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.success-card{background:#1a2a3a;border:1px solid rgba(34,197,94,.3);border-radius:1rem;padding:2.5rem 3rem;text-align:center;animation:popIn .3s ease}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.success-card .check{font-size:3rem;margin-bottom:.75rem}.success-card h3{margin:0 0 .5rem;font-size:1.3rem;color:#22c55e}.success-card p{margin:0 0 1.5rem;color:#ffffff80;font-size:.9rem}.completion{text-align:center;padding:3rem 2rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:1rem;width:100%;max-width:500px;animation:popIn .4s ease}.completion .bike-art{font-size:5rem;margin-bottom:1rem}.completion h2{margin:0 0 .5rem;font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,#22c55e,#16a34a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.completion p{margin:0 0 2rem;color:#ffffff80}.completion .stats{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem}.completion .stat{display:flex;flex-direction:column;align-items:center}.completion .stat-value{font-size:2rem;font-weight:800;color:#f59e0b}.completion .stat-label{font-size:.75rem;color:#fff6;text-transform:uppercase;letter-spacing:.1em}