*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}html h1{font-size:5rem}html div,html p,html h2,html h3,html h4,html h5,html h6,html span,html input,html button,html label,html li,html textarea{color:#d8d8d8;font-weight:400;font-size:1.6rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1f2125}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#app{width:100%;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;position:relative}#map{height:100%;max-height:100%;overflow:hidden;margin:0 2rem;border:1px solid #d8d8d8;border-radius:10px;position:relative}#map .composable{width:100%;max-width:100%;height:100%;max-height:100%}#map .composable .graticules,#map .composable .sphere{stroke:red;stroke-width:1}#map .composable .geographies .geography{fill:#fff;stroke-width:.5;stroke:#1f2125;outline:none!important}#map .composable .geographies .geography:hover{fill:#d18686}#map .composable .geographies .geography.clicked{fill:#b62929}#map #map-buttons{position:absolute;bottom:2rem;right:2rem;display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto 2rem auto;grid-template-areas:". up ." "left . right" ". down ." ". . ." "zoom unzoom reset"}#map #map-buttons button{background:#d8d8d8;border:none;color:#1f2125;width:4rem;height:4rem;line-height:1;border-radius:5px;user-select:none}#map #map-buttons button:hover{background:rgb(182,41,41);color:#d8d8d8}#map #map-buttons button.bottom{width:3rem;height:3rem;margin:0 auto}#map #map-buttons button.up{grid-area:up}#map #map-buttons button.left{grid-area:left}#map #map-buttons button.right{grid-area:right}#map #map-buttons button.down{grid-area:down}#map #map-buttons button.zoom{grid-area:zoom}#map #map-buttons button.unzoom{grid-area:unzoom}#map #map-buttons button.reset{grid-area:reset}.info-popup{position:absolute;top:0rem;left:0rem;margin:1rem;background:#d8d8d8;border-radius:5px;padding:1rem;border:1px solid #1f2125}.info-popup h2,.info-popup p{color:#1f2125}.info-popup h2{padding-right:2rem;margin-bottom:1rem;font-size:2rem}.info-popup button.close{position:absolute;top:0;right:0;padding:.5rem;border:none;line-height:.5;background:none;color:#1f2125;font-size:2rem;cursor:pointer}#buttons{display:flex;gap:2rem;justify-content:flex-start;padding:2rem}#buttons button{background:#1f2125;border:1px solid #d8d8d8;border-radius:100px;padding:.4rem 1rem;line-height:1}#buttons button:hover,#buttons button.clicked{background:#d8d8d8;color:#1f2125;cursor:pointer}#test-info{padding:2rem}