:root{--color-grass:#00892f;--color-grass-dot:#00e129;--color-rail:#d0d0d0;--color-rail-backing:#5e3000;--color-rail-active:#a87b7b;--color-control-accent:darkred;--color-meter-track:#ddd;--color-meter-tick:#fff8;--color-meter-border:#333;--color-helper-text:yellow;--shadow-helper-text:#000 1px 1px 5px;--playground-width:800px;--playground-height:840px;--terrain-tile-size:64px;--vehicle-size:20px;--railcar-width:60px;--control-width:90%}html{accent-color:var(--color-control-accent);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{grid-column-gap:1rem;grid-row-gap:0;background-color:var(--color-grass);grid-template-rows:1fr;grid-template-columns:15rem 1fr;margin:0;padding:1rem;display:grid}main{background-color:var(--color-grass);background-image:radial-gradient(var(--color-grass-dot) .5px, var(--color-grass) .5px);background-size:.5rem .5rem;width:100%}.playground__container{width:var(--playground-width);height:var(--playground-height);background-color:var(--color-grass);margin:0 auto 1rem;display:block;position:relative;overflow:hidden}.playground__terrain{grid-template-columns:repeat(13, var(--terrain-tile-size));grid-auto-rows:var(--terrain-tile-size);width:calc(13 * var(--terrain-tile-size));height:calc(14 * var(--terrain-tile-size));z-index:0;display:grid;position:absolute;inset:0}.playground__canvas{z-index:1;width:100%;height:100%;display:block;position:absolute}.terrain-tile{width:var(--terrain-tile-size);height:var(--terrain-tile-size);background-image:url(/railroads/assets/allSprites_default-BTZsxjIu.png);background-repeat:no-repeat;background-size:561px 565px;display:block}.terrain-tile--tile-grass-1{background-position:-192px -384px}.terrain-tile--tile-grass-2{background-position:-192px -320px}.terrain-tile--tile-sand-1{background-position:-128px 0}.terrain-tile--tile-sand-2{background-position:-64px -448px}.terrain-tile--tile-grass-road-east{background-position:-64px -128px}.terrain-tile--tile-grass-road-north{background-position:-192px -192px}.terrain-tile--tile-grass-road-crossing{background-position:0 -319px}.terrain-tile--tile-grass-road-split-n{background-position:-192px -128px}.terrain-tile--tile-grass-road-split-e{background-position:-192px -64px}.terrain-tile--tile-grass-road-corner-ll{background-position:-64px -320px}.terrain-tile--tile-grass-road-corner-lr{background-position:-64px -384px}.terrain-tile--tile-grass-road-corner-ul{background-position:0 -64px}.terrain-tile--tile-grass-road-corner-ur{background-position:-192px -256px}.terrain-tile--tile-grass-road-transition-s-dirt{background-position:-256px -320px}.terrain-tile--tile-grass-transition-e{background-position:-256px -128px}.terrain-tile--tile-tree-brown-large{background-position:-64px -192px}.terrain-tile--tile-tree-green-large{background-position:0 -447px}.rail__track{fill:none;stroke:var(--color-rail);stroke-width:6px;stroke-dasharray:none}.rail__backing{fill:none;stroke:var(--color-rail-backing);stroke-width:16px;stroke-dasharray:2 3}.rail--active{stroke:var(--color-rail-active)}.rail__helper{color:var(--color-helper-text);text-shadow:var(--shadow-helper-text);background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSI3LjgyNCAzLjMyNyAxMTUuNjM0IDMxLjcxOSIgd2lkdGg9IjExNS42MzQiIGhlaWdodD0iMzEuNzE5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOmJ4PSJodHRwczovL2JveHktc3ZnLmNvbSI+CiAgPHBhdGggZD0iTSA5Ljk0NyAxNC4wODEgSCA4MS44MzUgTCA4MS44MzUgNC4wODEgTCAxMjEuODM1IDE5LjA4MSBMIDgxLjgzNSAzNC4wODEgTCA4MS44MzUgMjQuMDgxIEggOS45NDcgViAxNC4wODEgWiIgc3R5bGU9InN0cm9rZTogcmdiKDI1NSwgMCwgMCk7IHN0cm9rZS1saW5lY2FwOiByb3VuZDsgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsgZmlsbDogbm9uZTsiIGJ4OnNoYXBlPSJhcnJvdyA5Ljk0NyA0LjA4MSAxMTEuODg4IDMwIDEwIDQwIDAgMUA0ZDVjYjE0NyIvPgo8L3N2Zz4=);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;justify-content:center;align-items:center;font-size:2rem;display:flex;position:absolute}.vehicle__locomotive{--train-translate-x:0px;--train-translate-y:0px;--train-rotate:0deg;top:calc(var(--vehicle-size) / -2);left:calc(var(--vehicle-size) / -2);width:var(--vehicle-size);height:var(--vehicle-size);font-size:var(--vehicle-size);line-height:var(--vehicle-size);transform-origin:50%;transform:translate(var(--train-translate-x), var(--train-translate-y)) rotate(var(--train-rotate));z-index:2;display:block;position:absolute}.vehicle__railcar{--train-translate-x:0px;--train-translate-y:0px;--train-rotate:0deg;top:calc(var(--vehicle-size) / -2);left:calc(var(--railcar-width) / -2);width:var(--railcar-width);height:var(--vehicle-size);font-size:var(--vehicle-size);line-height:var(--vehicle-size);transform-origin:50%;transform:translate(var(--train-translate-x), var(--train-translate-y)) rotate(var(--train-rotate));z-index:2;display:block;position:absolute}.controls__row{grid-template-columns:1fr auto;align-items:center;gap:.25rem .5rem;margin-bottom:1rem;display:grid}.controls__speed{width:var(--control-width);grid-column:1/-1;margin:0 auto;display:block}.controls__meter{--speed-fill-left:50%;--speed-fill-width:0%;width:var(--control-width);border:1px solid var(--color-meter-border);background:linear-gradient(90deg, var(--color-meter-tick) 1px, transparent 1px), var(--color-meter-track);background-size:10% 100%,100% 100%;border-radius:999px;grid-column:1/-1;height:.5rem;margin:.45rem auto 0;position:relative;overflow:hidden}.controls__meter:before{content:"";border-left:1px solid var(--color-meter-border);opacity:.5;position:absolute;top:0;bottom:0;left:50%}.controls__meter-fill{top:0;bottom:0;left:var(--speed-fill-left);width:var(--speed-fill-width);background:var(--color-control-accent);display:block;position:absolute}.controls__switches{flex-wrap:nowrap;justify-content:center;align-items:center;margin-bottom:1rem;display:flex}