@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ink: #0F1B2D;
    --green: #12A150;
    --mint: #3DDC84;
    --paper: #F4FBF7;
    --mx: 0%;
    --font-display: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--ink);
    font-family: var(--font-display);
    background-color: #fff;
    background-image:
        radial-gradient(ellipse 70% 58% at 50% 46%, #ffffff 0%, rgba(255, 255, 255, 0.72) 38%, rgba(244, 251, 247, 0) 68%),
        radial-gradient(ellipse 90% 80% at 50% 42%, #F4FBF7 0%, #ffffff 78%);
    color-scheme: light;
}

#map-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#pins {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.pin {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 3px 8px 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #3A4A44;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(18, 161, 80, 0.08);
}

.pin.is-faded {
    opacity: 0.42;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 5;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    top: 16px;
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

main {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 72px;
    pointer-events: none;
}

#mark-canvas {
    display: block;
    width: calc(160px * 1.51 + 36px);
    height: calc(160px + 36px);
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
}

.mark-fallback {
    display: block;
    height: 160px;
    width: auto;
}

h1 {
    margin: 2px 0 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.05;
    text-align: center;
    color: var(--ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    h1 {
        background-image: linear-gradient(90deg, #0F1B2D 0%, #12A150 46%, #3DDC84 100%);
        background-size: 150% 100%;
        background-position: var(--mx) 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

footer {
    position: fixed;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom));
    text-align: center;
    pointer-events: none;
}

footer p {
    margin: 0;
    color: #4B5568;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

@media (min-width: 800px) {
    #mark-canvas {
        width: calc(280px * 1.51 + 56px);
        height: calc(280px + 56px);
    }

    .mark-fallback {
        height: 280px;
    }

    h1 {
        margin-top: 0;
    }
}

::selection {
    background: #E8F6EE;
    color: var(--ink);
}