: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;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:#0a0a0a;color:#fafafa}.app{display:flex;height:100vh;width:100vw}.canvas-container{flex:1;position:relative;overflow:hidden}.panel{width:320px;min-width:320px;background:#0a0a12f2;border-left:1px solid rgba(255,255,255,.1);overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel h2{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#e63946,#f4a261);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem}.panel section{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.5rem;padding:.75rem}.panel h3{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#ffffff80;margin-bottom:.5rem}.slider-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}.slider-row label{width:55px;font-size:.8rem;color:#ffffffb3;flex-shrink:0}.slider-row input[type=range]{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff26;border-radius:2px;outline:none}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#e63946;cursor:pointer;border:2px solid #fff}.slider-val{font-size:.7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff6;width:36px;text-align:right}.color-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}.color-row label{width:55px;font-size:.8rem;color:#ffffffb3;flex-shrink:0}.color-row input[type=color]{width:28px;height:28px;border:2px solid rgba(255,255,255,.2);border-radius:6px;background:none;cursor:pointer;padding:0}.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-row input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.color-hex{font-size:.7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff6}.btn-race{margin-top:auto;padding:.85rem;font-size:1.1rem;font-weight:700;letter-spacing:.05em;border:none;border-radius:.5rem;background:linear-gradient(135deg,#e63946,#d62828);color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s}.btn-race:hover{transform:translateY(-2px);box-shadow:0 6px 20px #e6394666}.btn-race:active{transform:translateY(0)}.race-hud{align-items:center;text-align:center}.race-hud h2{font-size:1.2rem}.hud-hint{font-size:.85rem;color:#fff9;line-height:1.8;margin:.5rem 0}.btn-back{padding:.6rem 1.5rem;font-size:.9rem;font-weight:600;border:1px solid rgba(255,255,255,.2);border-radius:.4rem;background:#ffffff0d;color:#fff;cursor:pointer;transition:background .15s}.btn-back:hover{background:#ffffff1a}.controls-section,.race-tips{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.5rem;padding:.75rem}.controls-section h3,.race-tips h3{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff6;margin-bottom:.5rem}.control-row{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:#ffffffb3;margin-bottom:.3rem}.control-row kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 .35rem;font-size:.7rem;font-family:inherit;font-weight:600;color:#fff;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:.25rem}.race-tips p{font-size:.75rem;color:#ffffff80;line-height:1.5;margin-bottom:.35rem}.race-tips p:last-child{margin-bottom:0}.panel::-webkit-scrollbar{width:4px}.panel::-webkit-scrollbar-track{background:transparent}.panel::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}.preset-btn{display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:.35rem;color:#fffc;font-size:.7rem;cursor:pointer;transition:background .15s,border-color .15s}.preset-btn:hover{background:#ffffff14;border-color:#fff3}.preset-swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.2)}.preset-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.race-hud-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.hud-speed{position:absolute;bottom:2rem;left:2rem;display:flex;flex-direction:column;align-items:flex-start}.speed-number{font-size:3.5rem;font-weight:800;line-height:1;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5);letter-spacing:-.04em}.speed-unit{font-size:.75rem;font-weight:500;color:#ffffff80;text-transform:uppercase;letter-spacing:.15em;margin-top:-.1rem}.speed-bar{width:140px;height:4px;background:#ffffff26;border-radius:2px;margin-top:.5rem;overflow:hidden}.speed-bar-fill{height:100%;background:linear-gradient(90deg,#06d6a0,#f4a261,#e63946);border-radius:2px;transition:width .1s}.hud-laps{position:absolute;top:1.5rem;right:1.5rem;display:flex;gap:1.5rem;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.6rem 1.2rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.08)}.hud-lap-item{display:flex;flex-direction:column;align-items:center;gap:.15rem}.hud-label{font-size:.6rem;font-weight:600;color:#fff6;letter-spacing:.12em}.hud-value{font-size:1.1rem;font-weight:700;color:#fff}.hud-mono{font-variant-numeric:tabular-nums;font-size:.95rem}.hud-best{color:#06d6a0}.hud-gear{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);font-size:2.5rem;font-weight:800;color:#ffffff40;text-shadow:0 0 20px rgba(0,0,0,.3)}.hud-offtrack{position:absolute;bottom:5rem;left:50%;transform:translate(-50%);font-size:.85rem;font-weight:700;letter-spacing:.15em;color:#e63946;background:#e6394626;border:1px solid rgba(230,57,70,.3);padding:.3rem 1rem;border-radius:.3rem;animation:pulse-warning .8s ease-in-out infinite alternate}@keyframes pulse-warning{0%{opacity:.7}to{opacity:1}}@media(max-width:768px){.app{flex-direction:column}.canvas-container{height:50vh}.panel{width:100%;min-width:unset;max-height:50vh;border-left:none;border-top:1px solid rgba(255,255,255,.1)}.speed-number{font-size:2.5rem}.hud-laps{gap:.8rem;padding:.4rem .8rem}.hud-value{font-size:.9rem}.hud-gear{font-size:1.8rem}}