*{padding:0;margin:0}body{margin:0;background:darkgray;overflow:hidden;display:flex;justify-content:center;align-items:center}canvas{max-width:100%}ul{z-index:999;display:flex;align-content:space-around;position:fixed;top:0;left:0;right:0;transform:translateY(-.5em);transition:all .1s;opacity:.5;padding-bottom:2em}li{margin:auto;display:inline-block}ul li a{display:inline-block;padding:.1em .5em;border-radius:0 0 .5em .5em;margin:auto;color:#19345e33;text-decoration:none;text-shadow:0 0 1px #fff8;text-transform:uppercase;background:rgba(25,52,94,.4)}ul li a:hover{opacity:1;transform:translateY(0);color:#ff345e;background:rgba(25,52,94,.8);text-shadow:0 0 1px #000}ul:hover{opacity:1;transform:translateY(0)}.side-panel{position:fixed;top:0;right:0;height:100%;width:240px;z-index:999;transform:translate(100%);transition:transform .25s ease;background:rgba(25,52,94,.85);color:#fff}.side-panel.open{transform:translate(0)}.side-panel-toggle{position:absolute;left:-2.4em;top:50%;transform:translateY(-50%);width:2.4em;height:4.5em;border:none;border-radius:.6em 0 0 .6em;background:rgba(25,52,94,.85);color:#fff;font-size:1.1em;cursor:pointer}.side-panel-toggle:hover{background:rgba(25,52,94,1)}.side-panel-content{display:flex;flex-direction:column;gap:.6em;height:100%;box-sizing:border-box;padding:1em}.model-btn{border:none;border-radius:.5em;padding:.25em .75em;font:700 .8em Arial,sans-serif;text-transform:uppercase;color:#fff;background:rgba(25,52,94,.6);cursor:pointer}.model-btn:hover{background:rgba(25,52,94,.9)}.model-btn.active{background:hsl(180,100%,45%)}.model-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.4em}.neural-canvas{background:#949494}.follow-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}.follow-keys span{grid-column:1 / -1;font:700 .7em Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#fff9}.follow-keys button{border:2px solid transparent;border-radius:.4em;padding:.25em 0;font:700 .8em Arial,sans-serif;color:#fff;background:rgba(255,255,255,.15);cursor:pointer}.follow-keys button:hover{background:rgba(255,255,255,.3)}.follow-keys button.dead{background:transparent;border-color:var(--btn-color, hsl(180, 100%, 45%));color:var(--btn-color, hsl(180, 100%, 45%))}.follow-keys button.running{background:var(--btn-color, hsl(180, 100%, 45%));border-color:var(--btn-color, hsl(180, 100%, 45%));color:var(--btn-text, #000)}.follow-keys button.active{outline:2px solid #fff;outline-offset:1px}.side-panel-about{padding:.5em .7em;border-radius:.4em;background:rgba(255,255,255,.08);font:.72em Arial,sans-serif;line-height:1.5;color:#ffffffd9}.side-panel-legend{display:flex;flex-direction:column;gap:.15em;padding:.5em .7em;border-radius:.4em;background:rgba(255,255,255,.08);font:.72em Arial,sans-serif;color:#ffffffd9}.side-panel-legend .legend-title{font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#fff9}.side-panel-footer{margin-top:auto;font:.7em Arial,sans-serif;color:#fff9;text-align:center}.seed-wrap{display:flex;align-items:center;gap:8px;color:#ccc;font-size:12px}.seed-input{width:110px;padding:4px 8px;background:#111;color:#fff;border:1px solid #444;border-radius:4px;font:inherit}.steer-overlay{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:flex-start;align-items:flex-end;gap:28px;padding:12px 24px;pointer-events:none;z-index:500;opacity:1;transition:opacity .15s ease}.steer-overlay.hidden{opacity:0}.steer-wheel{width:110px;height:110px}.pedal{position:relative;width:44px;height:90px;overflow:hidden;background:rgba(25,52,94,.55);border-radius:8px}.pedal-cap{position:absolute;left:4px;right:4px;top:4px;height:28px;background:rgba(255,255,255,.85);border-radius:4px}.readout{display:flex;flex-direction:column;align-items:flex-start;gap:2px}.race,.laps{font-family:monospace;font-size:14px;color:#ffffffb3}.speedo{display:flex;align-items:baseline;padding-bottom:10px}.speedo-value{font-family:monospace;font-size:28px;font-weight:700;color:#ffffffe6}.speedo-unit{font-family:monospace;font-size:12px;color:#ffffff8c;margin-left:6px}