html, body {
    align-items: center;
    background: rgba(35, 66, 144, 0.78);
    border: none;
    color: #000b;
    display: flex;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 15px;
    justify-content: center;
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
    touch-action: none;

    --btn-size: 38px;
    --btn-pos: calc(var(--btn-size) * .375);
    --btn-text-color: #000a;
    --menu-color: #fff8;
    --menu-color-a2: #fffa;
    --tx: 300ms;
}

input {
    border: none;
    margin: 0;
    padding: 0;
}

button {
    background: unset;
    border: none;
    color: unset;
    cursor: pointer;
    font-size: unset;
    margin: 0;
    padding: 0;
}

.text-btn {
    --a-color: #444b;
    --a-hover: #444d;
    --a-shadow: #4443;

    letter-spacing: .05em;
    padding: .25em;
    margin-left: 50%;
    transform: translateX(-50%);
}

a {
    --a-color: rgba(0, 63, 153, 0.86);
    --a-hover: rgba(0, 59, 142, 0.99);
    --a-shadow: rgba(0, 59, 142, 0.13);
}

a, .text-btn {
    --a-tx: 150ms;

    color: var(--a-color);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color var(--a-tx), filter var(--a-tx), text-decoration-color var(--a-tx);
}

@media (hover: hover) {
    a:hover, .text-btn:hover {
        color: var(--a-hover);
        filter: drop-shadow(0 0 .12em var(--a-shadow));
        text-decoration-color: var(--a-hover);
    }
}

.error-wr {
    background: #fff8;
    box-shadow: 0.1em 0.2em 1.2em #fff6;
    border-radius: .15em;
    margin: 1em;
    padding: 2em;
}

.error-wr > code {
    color: #0009;
    display: block;
    font-size: .9em;
    max-width: 42em;
}

@media (max-width: 425px) {
    .error-wr {
        margin: .5em;
        padding: 1em;
    }

    .error-wr > code {
        word-break: break-all;
    }
}

.toast {
    background-color: #000b;
    border-radius: .6em;
    color: #fffc;
    padding: .6em;
    position: fixed;
    top: var(--btn-pos);
    text-align: center;
    left: 50%;
    transform: translate3d(-50%, -200%, 0);
    transition: transform var(--tx);
}

.toast.shown {
    transform: translate3d(-50%, 0, 0);
}

.round-button {
    border-radius: calc(var(--btn-size) * .5);
    fill: var(--btn-text-color);
    height: var(--btn-size);
    line-height: var(--btn-size);
    text-align: center;
    transition: background-color var(--tx), fill var(--tx), opacity var(--tx), transform var(--tx);
    width: var(--btn-size);
}

.round-button:not(.no-bg) {
    background-color: var(--menu-color);
}

@media (hover: hover) {
    .round-button:hover {
        fill: #000e;
    }
    .round-button:not(.no-bg):hover {
        background-color: var(--menu-color-a2);
    }
}

.round-button > .material-symbols-outlined {
    --s: 30px;
    --adj-s: 0px;
    width: var(--s);
    height: var(--s);
    margin-top: calc((var(--btn-size) - var(--s)) / 2 + var(--adj-s));
}

.reset-coords-button > .material-symbols-outlined {
    --adj-s: -.9px;
}

#hidden-canvas {
    left: 0;
    position: fixed;
    transform: translateY(-150%);
    top: 0;
}

#main-loader-wr {
    display: none;
    height: 100px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 100px;

    --pi: 3.141592653589793;
    --progress: 0%;
}

.main-loader {
    height: 100%;
    width: 100%;
    filter: drop-shadow(0 0 4px #fff);
}

.main-loader > circle {
    fill: none;
    stroke-width: 7%;
}

.main-loader > .circle-bg {
    --stroke-d: #fff6;
    --stroke-l: #fff9;
    animation: 1.8s ease-in-out infinite circle-glow;
    stroke: var(--stroke-d);
}

.main-loader > .circle-fg {
    --stroke-d: #fffa;
    --stroke-l: #ffff;
    animation: 1.8s ease-in-out infinite circle-glow;
    transform: rotate(-90deg);
    transform-origin: center;
    stroke: var(--stroke-d);
    stroke-dasharray: calc(.46 * 2 * var(--pi) * var(--progress)) 1000%;
    transition: stroke-dasharray 250ms;
}

@keyframes circle-glow {
    0% { stroke: var(--stroke-d) }
    27% { stroke: var(--stroke-d) }
    40% { stroke: var(--stroke-l) }
    53% { stroke: var(--stroke-d) }
    100% { stroke: var(--stroke-d) }
}

#main-canvas {
    background-color: #fff2;
    border: none;
    box-shadow: 0.3em 0.3em 1em #0002;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.main-menu {
    background-color: var(--menu-color);
    border-radius: calc(var(--btn-size) / 4);
    display: flex;
    filter: drop-shadow(0 0 3px #fff9);
    left: var(--btn-pos);
    position: absolute;
    top: var(--btn-pos);
    transition: transform var(--tx), background-color var(--tx), opacity var(--tx);
}

.menu-content {
    transition: opacity var(--tx);
    padding: .5em 0 .5em .5em;
    margin-right: -.25em;
}

.main-menu.collapsed {
    background-color: transparent;
    pointer-events: none;
    transform: translateX(calc(-100% + var(--btn-size)));
}

.main-menu.collapsed > .menu-content {
    opacity: 0;
}

.main-menu.collapsed > .menu-button {
    transform: rotateY(-180deg);
    pointer-events: all;
}

.main-menu.collapsed > .menu-button.blink {
    animation: blink-bg 800ms infinite;
}

@keyframes blink-bg {
    0% {
        background-color: var(--menu-color);
        box-shadow: none;
        color: var(--btn-text-color);
    }
    50% {
        background-color: white;
        box-shadow: 0 0 1.2em #fffc;
        color: black;
    }
    100% {
        background-color: var(--menu-color);
        box-shadow: none;
        color: var(--btn-text-color);
    }
}

.main-menu:not(.collapsed) > .menu-button {
    background-color: transparent;
}

@media (hover: hover) {
    .main-menu:not(.collapsed) > .menu-button:hover {
        color: #000f;
    }
}

.menu-controls > label {
    display: block;
}

.menu-controls > input {
    display: block;
    margin-bottom: .25em;
    width: 100%;
}

.info-wr {
    display: grid;
    gap: .25em .75em;
    grid-template-columns: auto auto;
}

.info-wr > .info-caption {
    color: #222b;
}


.reset-coords-button {
    position: absolute;
    right: var(--btn-pos);
    top: var(--btn-pos);
}

.about {
    --m: 2rem;
    --w: calc(min(460px, 100vw - 2 * var(--m)));
    --l: calc((100vw - var(--w)) / 2);

    background: #fffc;
    box-sizing: border-box;
    border-radius: .5em;
    overflow: scroll;
    padding: 1em;
    position: absolute;
    top: var(--m);
    left: var(--l);
    max-height: calc(100% - 2 * var(--m));
    width: var(--w);
}

.about.hidden {
    display: none;
}

#about-close-btn {
    position: fixed;
    left: calc(var(--l) + var(--w) - var(--btn-size) - .75em);
    top: calc(var(--m) + .75em);
}

.social-wr {
    fill: #0009;
    display: flex;
    margin-top: .5em;
}

.social-wr > a:not(:last-child) {
    margin-right: .4em;
}

.social-wr > a {
    transition: fill var(--tx);
}

@media (hover: hover) {
    .social-wr > a:hover {
        fill: #000d;
    }
}

.social-wr > a > svg {
    height: 24px;
    width: 24px;
}