*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#eee;min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}header{text-align:center;padding:1rem;background:#16213e}header h1{font-size:1.8rem;color:#4ecca3}header p{color:#888;margin-top:.25rem}main{display:flex;flex:1;gap:1rem;padding:1rem}.simulation-container{flex:1;display:flex;justify-content:center;align-items:center;background:#0f0f23;border-radius:8px;overflow:hidden;position:relative}#canvas{display:block;cursor:pointer}.car-info{position:absolute;top:1rem;left:1rem;width:280px;background:#16213ef2;border-radius:8px;padding:1rem;border:1px solid #4ecca3;box-shadow:0 4px 20px #00000080;z-index:100}.car-info.hidden{display:none}.car-info h3{color:#4ecca3;margin-bottom:.75rem;padding-right:1.5rem}.car-info .close-btn{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;line-height:1;padding:.25rem}.car-info .close-btn:hover{color:#e94560}.info-section{margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid #333}.info-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.info-section h4{color:#4ecca3;font-size:.85rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.info-section p{font-size:.85rem;color:#ccc;margin:.25rem 0}.info-section p strong{color:#888}.info-section p span{color:#fff}.info-section ul{list-style:none;padding-left:0}.info-section li{font-size:.85rem;color:#ccc;margin:.25rem 0;padding-left:.75rem;border-left:2px solid #4ecca3}.trip-desc{font-style:italic;color:#aaa!important;margin-top:.5rem!important}.controls{width:280px;background:#16213e;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:1rem}.controls h2{color:#4ecca3;font-size:1.2rem;border-bottom:1px solid #333;padding-bottom:.5rem}.control-group{display:flex;flex-direction:column;gap:.25rem}.control-group label{font-size:.9rem;color:#ccc}.control-group label span{color:#4ecca3;font-weight:700}input[type=range]{width:100%;height:8px;-webkit-appearance:none;background:#333;border-radius:4px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#4ecca3;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-thumb:hover{background:#3db892}.buttons{display:flex;gap:.5rem}.buttons button{flex:1;padding:.75rem;font-size:1rem;border:none;border-radius:4px;cursor:pointer;transition:background .2s}#pauseBtn{background:#e94560;color:#fff}#pauseBtn:hover{background:#d63050}#pauseBtn.paused{background:#4ecca3}#pauseBtn.paused:hover{background:#3db892}#resetBtn{background:#444;color:#fff}#resetBtn:hover{background:#555}.stats{margin-top:auto;background:#0f0f23;border-radius:4px;padding:1rem}.stats h3{color:#4ecca3;font-size:1rem;margin-bottom:.5rem}.stats p{font-size:.9rem;color:#aaa;margin:.25rem 0}.stats p span{color:#fff;font-weight:700}@media (max-width: 900px){main{flex-direction:column}.controls{width:100%;flex-direction:row;flex-wrap:wrap}.control-group{width:calc(50% - .5rem)}.buttons,.stats{width:100%}}