:root{--grass-colour:#006000;--window-colour:#123;--window-margin:10px;--backdrop-filter:var(--backdrop-filter-blur);--backdrop-filter-blur:blur(5px)}*{box-sizing:border-box;user-select:none;transition:all .2s ease-in-out}*:disabled{cursor:not-allowed}* .hidden{display:none!important}html{overflow:hidden;overscroll-behavior:none;user-select:none}body{color:#fff;display:flex;overflow:hidden;overscroll-behavior:none;--buncss-light:initial;--buncss-dark: ;color-scheme:light;user-select:none;background-color:#123;flex-direction:column;justify-content:center;align-items: center;height:100svh;margin:0;padding:0;font-family:Roboto,Arial,sans-serif;font-size:16px;font-weight:700}body.lowPerformanceMode{--backdrop-filter: ;--buncss-light:initial;--buncss-dark: ;color-scheme:light}body.raceMode #stadiumContainer{grid-area:1/2/3/4!important}body.raceMode .garageContainer{opacity:0;position:relative;pointer-events:none;translate:375px}body.raceMode .neuralNetworkContainer{opacity:0;position:relative;pointer-events:none;translate:375px}body.raceMode .naturalSelectionContainer .inputControlContainer>.option:not(:has(#tickLimit)){opacity:0;pointer-events:none;translate:-100px}body.raceMode .naturalSelectionContainer .statusBoard{opacity:0;pointer-events:none;translate:-100px}body.raceMode .miscellaneousContainer{grid-area:1/4/3/5!important}body.raceMode .leaderboardContainer .id{display:initial!important}body.raceMode .leaderboardContainer .generation{display:none!important}body.raceMode .tipsContainer .tips{opacity:.5!important;width:0!important}input:invalid{background-color:#ff0000a0!important}input:user-invalid{background-color:#ff0000a0!important}.button{border:1px solid var(--buttonColour);color:#fff;display:flex;cursor:pointer;background-color:#ffffff20;border-radius:5px;justify-content:center;align-items: center;padding:3px 8px;font-weight:700}.button:hover{background-color:var(--buttonColour);color:#000}.outline{outline:2px solid #ffffff60;border-radius:10px}#whatButton{--size:60px;width:var(--size);height:var(--size);aspect-ratio:1;display:flex;color:#fff;cursor:help;background-color:#ffffff20;border:5px solid #fff;border-radius:50%;justify-content:center;align-items: center;font-size:40px}#whatButton:hover{background-color:#ffffff40}#mainContainer:not(:has(#whatButton:hover)) .whatText{display:none}.whatText{position:absolute;z-index:99;display:flex;text-align:center;translate:calc(var(--padding)*-1)calc(var(--padding)*-1);background-color:#000000a0;border-radius:10px;justify-content:center;align-items: center;font-size:60px}#mainContainer{display:grid;grid-template-columns:375px 600px 375px 145px;grid-template-rows:repeat(2,300px)auto;grid-column-gap:10px;grid-row-gap:10px;overflow:hidden;position:relative;padding:5px}#mainContainer>div{overflow:hidden}#mainContainer>.window{position:absolute;margin:var(--window-margin);z-index:99;pointer-events:auto;background-color:color-mix(in srgb,var(--window-colour),transparent 20%);backdrop-filter:var(--backdrop-filter);overflow:hidden}#mainContainer>.window>summary{cursor:pointer;position:relative;background-color:#ffffff30;padding:10px 15px;font-size:20px}#mainContainer>.window>summary::marker{content:"+ ";font-family:monospace}#mainContainer>.window[open]>summary{font-size:inherit;padding:5px 10px}#mainContainer>.window[open]>summary::marker{content:"- "}#mainContainer>#stadiumContainer{grid-area:1/2/3/3;display:flex;background-color:var(--grass-colour);position:relative;overscroll-behavior:none;flex-direction:column;justify-content:center;align-items: center}#mainContainer>#stadiumContainer .tutorialText{position:absolute;z-index:99;pointer-events:none;color:#ffffff80;padding:5px 10px;font-size:12px;font-weight:400;bottom:0;left:0}#mainContainer>#stadiumContainer #clearStadiumButton{position:absolute;display:flex;cursor:pointer;color:#fff;text-shadow:0 0 5px #000;z-index:99;text-decoration:underline;background-color:#ff6060;border:none;border-top-left-radius:5px;justify-content:center;align-items: center;padding:5px;font-size:12px;font-weight:700;bottom:0;right:0}#mainContainer>#stadiumContainer #clearStadiumButton:hover{background-color:red}#mainContainer>#stadiumContainer canvas{position:absolute;cursor:none;overscroll-behavior:none}#mainContainer>#stadiumContainer #hintCanvas{z-index:10}#mainContainer>#stadiumContainer #carCanvas{z-index:5}#mainContainer>#stadiumContainer #trackCanvas{z-index:2}#mainContainer>.garageContainer{grid-area:1/3/2/4;display:flex;flex-direction:row;justify-content:space-between;align-items: center}#mainContainer>.garageContainer .garageCanvasContainer{display:flex;position:relative;justify-content:center;align-items: center}#mainContainer>.garageContainer .garageCanvasContainer #frontText{--padding:20px;position:absolute;z-index:1;color:#fff;display:flex;text-align:center;overflow:visible;text-wrap:nowrap;justify-content:center;align-items: center;width:0;height:0;font-size:20px;left:50%}#mainContainer>.garageContainer .garageCanvasContainer #backText{--padding:20px;position:absolute;z-index:1;color:#fff;display:flex;text-align:center;overflow:visible;text-wrap:nowrap;justify-content:center;align-items: center;width:0;height:0;font-size:20px;left:50%}#mainContainer>.garageContainer .garageCanvasContainer #frontText{top:var(--padding)}#mainContainer>.garageContainer .garageCanvasContainer #backText{bottom:var(--padding)}#mainContainer>.garageContainer #garageCanvas{background-color:var(--grass-colour)}#mainContainer>.garageContainer .probeAngleContainer{display:flex;flex-direction:column;justify-content:center;align-items: center;gap:2px;height:280px;margin:10px}#mainContainer>.garageContainer .probeAngleContainer>#probeAngles{resize:none;scrollbar-width:thin;text-align:right;color:#fff;background-color:#ffffff20;border:none;border-radius:2px;flex-grow:1;min-width:55px;max-width:55px;padding-inline-start:5px;padding-inline-end:5px;font-family:Cascadia Code,Courier New,Courier,monospace;font-weight:700}#mainContainer>.neuralNetworkContainer{grid-area:2/3/3/5;display:flex;flex-direction:row;justify-content:center;align-items: center;gap:10px;padding:10px}#mainContainer>.neuralNetworkContainer .title{text-decoration:solid underline;align-self: center;margin-bottom:10px}#mainContainer>.neuralNetworkContainer .inputControlContainer{display:flex;flex-direction:column;flex-grow:1;justify-content:center;align-items: flex-end;gap:2px;height:100%}#mainContainer>.neuralNetworkContainer .inputControlContainer label{cursor:help;font-weight:400}#mainContainer>.neuralNetworkContainer .diagramContainer{display:flex;flex-direction:column;justify-content:space-between;align-items: center;margin-left:10px;margin-right:15px}#mainContainer>.neuralNetworkContainer #layerContainer{--labelTop:-25px;display:flex;position:relative;margin-top:calc(var(--labelTop)*-1);flex-direction:row;justify-content:space-between;align-items: center;width:100%;height:30px}#mainContainer>.neuralNetworkContainer #layerContainer .inputLayerContainer{display:flex;text-align:center;overflow:visible;flex-direction:column;justify-content:center;align-items: center;width:0;height:100%}#mainContainer>.neuralNetworkContainer #layerContainer .hiddenLayersContainer{display:flex;text-align:center;overflow:visible;flex-direction:column;justify-content:center;align-items: center;width:0;height:100%}#mainContainer>.neuralNetworkContainer #layerContainer .outputLayerContainer{display:flex;text-align:center;overflow:visible;flex-direction:column;justify-content:center;align-items: center;width:0;height:100%}#mainContainer>.neuralNetworkContainer #layerContainer .hiddenLayersContainer{flex-grow:1;padding-inline-start:35px;padding-inline-end:35px}#mainContainer>.neuralNetworkContainer #layerContainer .layerLabel{top:var(--labelTop);position:absolute;display:flex;text-align:center;justify-content:center;align-items: center;width:0}#mainContainer>.neuralNetworkContainer #layerContainer #hiddenLayers{display:flex;color:#fff;text-align:center;resize:none;overflow:hidden;background-color:#ffffff20;border:none;border-radius:5px;flex-direction:row;justify-content:center;align-items: center;width:100%;height:100%;margin:0;padding:0;font-family:Cascadia Code,Courier New,Courier,monospace;font-size:20px;font-weight:700;line-height:30px}#mainContainer>.neuralNetworkContainer #layerContainer #hiddenLayers:disabled{background-color:#ffffff40}#mainContainer>.naturalSelectionContainer{grid-area:1/1/2/2;--padding:10px;display:flex;padding:var(--padding);flex-direction:column;gap:10px}#mainContainer>.naturalSelectionContainer .inputControlContainer{display:flex;flex-direction:column;justify-content:center;align-items: center;gap:2px}#mainContainer>.naturalSelectionContainer .inputControlContainer .option{display:flex;flex-direction:row;justify-content:space-between;align-items: center;width:100%}#mainContainer>.naturalSelectionContainer .inputControlContainer .option input{text-align:right;color:#fff;background-color:#ffffff20;border:none;border-radius:2px;width:100px;padding-right:5px;font-family:Cascadia Code,Courier New,Courier,monospace;font-weight:700}#mainContainer>.naturalSelectionContainer .inputControlContainer .option input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#mainContainer>.naturalSelectionContainer .inputControlContainer .option input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#mainContainer>.naturalSelectionContainer .inputControlContainer .option input[type=checkbox]{width:initial}#mainContainer>.naturalSelectionContainer .inputControlContainer label{cursor:help;font-weight:400}#mainContainer>.naturalSelectionContainer .statusBoard{outline:2px solid #ffffff20;display:flex;overflow:hidden;background-color:#00000060;border-radius:5px;flex-direction:column;flex-grow:1}#mainContainer>.naturalSelectionContainer .statusBoard .header{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;font-weight:400}#mainContainer>.naturalSelectionContainer .statusBoard .row{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;font-weight:400}#mainContainer>.naturalSelectionContainer .statusBoard .header{background-color:#ffffff20;padding-block-start:3px;padding-block-end:3px}#mainContainer>.naturalSelectionContainer .statusBoard .header div{text-align:center;position:relative}#mainContainer>.naturalSelectionContainer .statusBoard .header div:not(:last-child):after{content:"";position:absolute;display:block;background-color:#ffffff20;width:1px;height:100vh;top:-50vh;right:0}#mainContainer>.naturalSelectionContainer .statusBoard .row{padding-block-start:2px;padding-block-end:2px}#mainContainer>.naturalSelectionContainer .statusBoard .row div{text-align:right;padding-right:10px;font-family:Cascadia Code,Courier New,Courier,monospace}#mainContainer>.naturalSelectionContainer .statusBoard .scroll{overflow-y:auto;direction:rtl;position:relative;scroll-snap-type:proximity;scrollbar-width:thin;scrollbar-color:#ffffff40 #00000040;flex-grow:1;min-height:100px}#mainContainer>.naturalSelectionContainer .statusBoard .scroll *{direction:ltr}#mainContainer>.naturalSelectionContainer .statusBoard .scroll:not(:has(.row)):before{position:absolute;overflow:visible;display:flex;content:"No entries yet";text-align:center;white-space:nowrap;justify-content:center;align-items: center;width:0;height:0;top:50%;left:50%}#mainContainer>.naturalSelectionContainer .bottom{display:flex;flex-direction:row;justify-content:space-between;align-items: center;gap:10px}#mainContainer>.naturalSelectionContainer .bottom #tickCounter{display:flex;position:relative;overflow:hidden;background-color:#ffffff20;border-radius:5px;flex-grow:1;justify-content:center;align-items: center;height:100%;font-weight:400}#mainContainer>.naturalSelectionContainer .bottom #tickCounter:after{content:"";position:absolute;top:0;left:calc(var(--progress) - 100%);z-index:-1;background-color:#00aa0080;width:100%;height:100%}#mainContainer>.leaderboardContainer{grid-area:2/1/3/2;display:flex;flex-direction:column;align-items: center}#mainContainer>.leaderboardContainer .leaderboardTableContainer{display:flex;overflow:hidden;flex-direction:column;flex-grow:1;width:100%}#mainContainer>.leaderboardContainer .id{display:none;text-align:center;padding:0}#mainContainer>.leaderboardContainer .header>.id{display:none;text-align:center;padding:0}#mainContainer>.leaderboardContainer .entry>.id{display:none;text-align:center;padding:0}#mainContainer>.leaderboardContainer .entry>.id{word-break:break-all}#mainContainer>.leaderboardContainer .header{display:grid;grid-template-columns:1fr 1fr 1.5fr 1.2fr 1.5fr 1.5fr}#mainContainer>.leaderboardContainer .entry{display:grid;grid-template-columns:1fr 1fr 1.5fr 1.2fr 1.5fr 1.5fr}#mainContainer>.leaderboardContainer .header{background-color:#ffffff20;padding-block-start:8px;padding-block-end:8px}#mainContainer>.leaderboardContainer .header div{text-align:center;position:relative;cursor:help}#mainContainer>.leaderboardContainer .header div:not(:last-child):after{content:"";position:absolute;display:block;pointer-events:none;background-color:#ffffff20;width:1px;height:1000vh;top:-500vh;right:0}#mainContainer>.leaderboardContainer .entry{padding-block-start:5px;padding-block-end:5px}#mainContainer>.leaderboardContainer .entry div{display:flex;cursor:pointer;overflow:visible;text-align:right;justify-content:flex-end;align-items: flex-end;padding-right:10px;font-family:Cascadia Code,Courier New,Courier,monospace;font-size:14px;font-weight:400}#mainContainer>.leaderboardContainer .entry.selected{color:#000;background-color:#f8f8ff}#mainContainer>.leaderboardContainer .scroll{overflow-y:auto;direction:rtl;position:relative;scroll-snap-type:proximity;scrollbar-width:thin;scrollbar-color:#ffffff40 #00000040;background-color:#00000040;flex-grow:1;min-height:100px}#mainContainer>.leaderboardContainer .scroll *{direction:ltr}#mainContainer>.leaderboardContainer .scroll:not(:has(.entry)):before{position:absolute;overflow:visible;display:flex;content:"No entries yet";text-align:center;white-space:nowrap;justify-content:center;align-items: center;width:0;height:0;top:50%;left:50%}#mainContainer>.leaderboardContainer .leaderboardBottomBar{display:flex;flex-direction:row;justify-content:space-between;align-items: center;width:100%;padding:10px}#mainContainer>.leaderboardContainer #exportSelectedCarButton{--buttonColour:#8f8}#mainContainer>.leaderboardContainer #resetLeaderboardButton{--buttonColour:#f88}#mainContainer>.miscellaneousContainer{grid-area:1/4/2/5;display:flex;flex-direction:column;justify-content:flex-start;align-items: flex-end;gap:10px;font-size:14px}#mainContainer>.miscellaneousContainer .fpsContainer{display:flex;flex-direction:row;justify-content:center;align-items: center;gap:5px}#mainContainer>.miscellaneousContainer #resetSettingsButton{--buttonColour:#f88}#mainContainer>.miscellaneousContainer #importCar{--buttonColour:#88f}#mainContainer>.miscellaneousContainer .raceModeContainer{display:flex;background-color:#ffffff20;border:1px solid #00ff0080;border-radius:5px;flex-direction:row;justify-content:center;align-items: center;gap:5px;padding:2px 8px}#mainContainer>.miscellaneousContainer .scoring{display:flex;overflow:auto;scrollbar-width:thin;scrollbar-color:#ffffff40 #00000040;background-color:#ffffff20;border:2px solid #ffff88a0;border-radius:5px;flex-direction:column;flex-grow:1;justify-content:flex-start;align-self: flex-start;align-items: flex-start;width:100%;padding:5px;font-size:12px;font-weight:400}#mainContainer>.miscellaneousContainer .tickSpeedControls{display:flex;flex-direction:column;flex-grow:1;justify-content:flex-end;align-items: center;width:100%}#mainContainer>.miscellaneousContainer .tickSpeedControls>div{display:flex;flex-direction:row;justify-content:space-between;align-items: center;gap:5px;width:100%}#mainContainer>.miscellaneousContainer .tickSpeedControls input{text-align:right;color:#fff;background-color:#ffffff20;border:none;border-radius:2px;width:50px;font-family:Cascadia Code,Courier New,Courier,monospace;font-weight:700}#mainContainer>.miscellaneousContainer .tickSpeedControls input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#mainContainer>.miscellaneousContainer .tickSpeedControls input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#mainContainer>#dragPrompt{position:absolute;display:flex;z-index:99;color:#fff;text-align:center;pointer-events:none;background-color:#0009;border-radius:10px;justify-content:center;align-items: center;width:100%;height:100%;padding:20px;font-size:24px;font-weight:700;top:50%;left:50%;transform:translate(-50%,-50%)}#mainContainer .tipsContainer{grid-area:3/1/4/5;display:flex;overflow:hidden;flex-direction:column;justify-content:center;align-items: center;width:100%;height:1lh}#mainContainer .tipsContainer .tips{display:flex;overflow:scroll;scrollbar-width:none;pointer-events:none;scroll-behavior:smooth;flex-direction:column;justify-content:flex-start;align-items: center;width:100%}#mainContainer .tipsContainer .tip{text-wrap:nowrap;font-weight:400}#carPeeker{z-index:99;pointer-events:none;position:absolute;background-color:rgba(from var(--carColour,#000)r g b/.8);backdrop-filter:var(--backdrop-filter);color:#fff;display:flex;text-shadow:0 0 10px #000;display:none;border:2px solid #fff;border-radius:5px;flex-direction:row;justify-content:center;align-items: center;gap:10px;padding:5px;transition:none;top:-100vh;left:-100vw;translate:0 -100%}#carPeeker .right{display:flex;flex-direction:column;justify-content:center;align-items: center;gap:10px}#carPeeker .right .carPeekerProbeAnglesContainer{display:flex;background-color:#00000080;border-radius:10px;flex-direction:column;justify-content:center;align-items: center;gap:10px;padding:10px}#carPeeker .right .carPeekerNeuralNetworkContainer{display:flex;background-color:#00000080;border-radius:10px;flex-direction:column;justify-content:center;align-items: center;gap:10px;padding:10px}@keyframes focusHighlight{0%{box-shadow:0 0 #ffeb3b80,0 0 10px 2px #ffeb3b80;outline:2px solid #ffeb3b}70%{box-shadow:0 0 0 10px #ffeb3b40,0 0 20px 6px #ffeb3b80;outline:2px solid #ffeb3b}to{box-shadow:none;outline:none}}.focus-animate{animation:focusHighlight 1s ease-out}
