@layer base, vendor, components, features;

@import url("../vendor/leaflet/leaflet.css") layer(vendor);

@font-face {
    font-family: "QuinqueFive";
    font-weight: 700;
    font-display: swap;
    ascent-override: 80%;
    descent-override: 20%;
    line-gap-override: 0%;
    src: url("../fonts/QuinqueFive-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/SchibstedGrotesk.woff2") format("woff2");
}

@font-face {
    font-family: "Azeret Mono";
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/AzeretMono.woff2") format("woff2");
}

@property --fade-start {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --fade-end {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@layer base {
    :root {
        color-scheme: dark;
        --font-display: "QuinqueFive", system-ui, sans-serif;
        --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
        --font-mono: "Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

        --black: #000;
        --stone-950: #111112;
        --stone-900: #1e1e1f;
        --stone-800: #262627;
        --stone-700: #313233;
        --stone-600: #48494a;
        --stone-500: #58585a;
        --stone-200: #a0a1a4;
        --stone-100: #d0d1d4;
        --stone-lip: #b1b2b5;
        --white: #fff;

        --accent: #b35a1f;
        --accent-hi: #d4732f;
        --accent-lo: #5e2a0a;
        --green: #52a535;
        --gold: #ffcf3f;
        --red: #e34a4a;
        --red-lo: #8f2a2a;
        --purple: #a77bff;
        --night: #8fa6d9;

        --space-1: 2px;
        --space-2: 4px;
        --space-3: 8px;
        --space-4: 12px;
        --space-5: 16px;
        --space-6: 24px;
        --space-7: 32px;

        --text-xs: 11px;
        --text-s: 12px;
        --text-m: 13px;
        --text-l: 14px;
        --text-xl: 16px;
        --text-2xl: 22px;
        --display-s: 7.5px;
        --display-m: 10px;

        --control: 40px;
        --control-s: 32px;
        --row: 44px;
        --map-button: 44px;

        --edge: 2px solid var(--stone-900);
        --field-edge: 2px solid var(--stone-600);
        --divider: 2px solid var(--stone-900);
        --bevel: inset 0 2px rgb(255 255 255 / .06);
        --well: inset 2px 2px rgb(0 0 0 / .4);
        --raised: 0 4px 12px rgb(0 0 0 / .4);
        --slab-shadow: inset 0 2px rgb(255 255 255 / .08), 0 8px 24px rgb(0 0 0 / .5);
        --backdrop: rgb(0 0 0 / .55);
        --glass: rgb(49 50 51 / .93);
        --glass-blur: blur(12px);
        --ease-out: cubic-bezier(.22, 1, .36, 1);
        --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
        --hover: background-color .15s, border-color .15s, color .15s;

        --safe-top: env(safe-area-inset-top, 0px);
        --topbar-h: calc(56px + var(--safe-top));
        --view-h: calc(100dvh - var(--safe-top));
        --panel-w: 300px;
        --gap: var(--space-5);
    }

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

    html, body {
        height: 100%;
    }

    body {
        display: grid;
        grid-template-rows: var(--topbar-h) 1fr;
        grid-template-columns: minmax(0, 1fr);
        padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
        overflow: hidden;
        background: var(--black);
        color: var(--white);
        font: var(--text-l)/1.4 var(--font-body);
        -webkit-font-smoothing: antialiased;
    }

    button, input, select, textarea {
        border-radius: 0;
        font: inherit;
        color: inherit;
        caret-color: var(--accent-hi);
    }

    ::selection {
        background: var(--accent);
        color: var(--white);
    }

    input[type="search"] {
        appearance: none;
    }

    ul, ol {
        padding: 0;
        list-style: none;
    }

    :focus-visible {
        outline: 2px solid var(--white);
        outline-offset: 2px;
    }

    [hidden] {
        display: none !important;
    }

    kbd {
        min-width: 20px;
        padding: var(--space-1) var(--space-2) var(--space-2);
        background: var(--stone-100);
        border: var(--edge);
        color: var(--stone-900);
        font: 600 var(--text-xs)/1 var(--font-mono);
        text-align: center;
        box-shadow: inset 0 -2px var(--stone-lip), inset 1px 1px rgb(255 255 255 / .6);
    }

    code {
        font: 500 var(--text-xs) var(--font-mono);
    }

    @media (hover: none) {
        .needs-hover {
            display: none !important;
        }
    }
}

@layer components {
    .panel__body, .menu, .dialog__body, .search__results {
        scrollbar-width: thin;
        scrollbar-color: var(--stone-500) transparent;
    }

    .slab, .menu, .dialog, .toolbar {
        background: var(--stone-700);
        border: var(--edge);
        box-shadow: var(--slab-shadow);
        color: var(--white);
    }

    @supports (backdrop-filter: blur(1px)) {
        .slab, .menu, .toolbar, .map-btn, .leaflet-bar a, .panel__toggle {
            background-color: var(--glass);
            backdrop-filter: var(--glass-blur);
        }
    }

    .menu[popover], .dialog, .dialog::backdrop {
        transition: opacity .2s, translate .25s var(--ease-out), scale .25s var(--ease-out),
            display .25s allow-discrete, overlay .25s allow-discrete;
    }

    .menu[popover]:not(:popover-open) {
        opacity: 0;
        translate: 0 -6px;
        scale: .98;
    }

    .dialog:not([open]) {
        opacity: 0;
        translate: 0 8px;
        scale: .98;
    }

    .dialog::backdrop {
        backdrop-filter: blur(3px);
    }

    .dialog:not([open])::backdrop {
        opacity: 0;
    }

    @starting-style {
        .menu[popover]:popover-open {
            opacity: 0;
            translate: 0 -6px;
            scale: .98;
        }

        .dialog[open] {
            opacity: 0;
            translate: 0 12px;
            scale: .97;
        }

        .dialog[open]::backdrop {
            opacity: 0;
        }
    }

    .context-menu {
        animation: menu-in .18s var(--ease-out);
    }

    @keyframes menu-in {
        from {
            opacity: 0;
            translate: 0 -6px;
            scale: .98;
        }
    }

    @keyframes rise {
        from {
            opacity: 0;
            translate: var(--rise-from, 0 16px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *, ::before, ::after, ::backdrop {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }

    .title {
        font: 700 var(--display-m)/1.2 var(--font-display);
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .label {
        color: var(--stone-200);
        font: 700 var(--display-s)/1 var(--font-display);
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .heading .badge {
        margin-block: -3px;
    }

    .mono {
        font-family: var(--font-mono);
        font-size: var(--text-s);
    }

    .muted {
        color: var(--stone-200);
        font-size: var(--text-m);
    }

    .hint {
        color: var(--stone-200);
        font-size: var(--text-s);
        line-height: 1.4;
    }

    .error {
        color: var(--red);
        font-size: var(--text-m);
    }

    .note {
        color: var(--stone-100);
        font-size: var(--text-m);
        font-weight: 600;
        line-height: 1.4;
    }

    .note:empty {
        display: none;
    }

    .note.is-done {
        color: var(--green);
    }

    .note.is-failed {
        color: var(--red);
    }

    .note:is(.is-dirty, .is-conflict) {
        color: var(--gold);
    }

    .note.is-live {
        color: var(--accent-hi);
    }

    .empty {
        padding: var(--space-6) var(--space-5);
        color: var(--stone-200);
        font-size: var(--text-m);
        text-align: center;
    }

    .badge {
        min-width: 28px;
        padding: 3px var(--space-2);
        background: var(--stone-900);
        color: var(--stone-100);
        font: 600 var(--text-s)/1 var(--font-mono);
        text-align: center;
    }

    .tag {
        flex: none;
        padding: 3px calc(var(--space-2) - .06em) 3px var(--space-2);
        overflow: hidden;
        background: var(--stone-900);
        color: var(--stone-200);
        font: 700 var(--display-s)/1 var(--font-display);
        letter-spacing: .06em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .tag--accent {
        background: var(--accent-lo);
        color: var(--accent-hi);
    }

    [data-icon]::before {
        content: "";
        display: inline-block;
        flex: none;
        width: 16px;
        height: 16px;
        background: var(--icon-color, currentColor);
        mask: var(--icon) center / contain no-repeat;
    }

    .btn {
        --depth: 4px;
        --lip: var(--stone-lip);
        --shine: rgb(255 255 255 / .6);
        --press: rgb(0 0 0 / .15);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        min-height: var(--control);
        padding: 0 var(--space-4) var(--depth);
        background: var(--stone-100);
        border: var(--edge);
        color: var(--stone-900);
        font-size: var(--text-l);
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: inset 0 calc(-1 * var(--depth)) var(--lip), inset 2px 2px var(--shine);
        transition: var(--hover);
    }

    .btn:hover:not(:disabled) {
        background: var(--white);
    }

    .btn:active:not(:disabled),
    .btn.is-keyed:not(:disabled),
    .btn[aria-pressed="true"] {
        padding-bottom: 0;
        box-shadow: inset 0 var(--depth) var(--press);
    }

    .btn--primary {
        --lip: var(--accent-lo);
        --shine: rgb(255 255 255 / .2);
        --sheen: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .22) 42% 48%, transparent 48% 51%, rgb(255 255 255 / .22) 51% 53%, transparent 53%);
        background: var(--accent);
        color: var(--white);
    }

    .btn--primary:hover:not(:disabled) {
        background: var(--sheen) 120% 0 / 250% 100% no-repeat var(--accent-hi);
        animation: sheen .7s var(--ease-out);
    }

    @keyframes sheen {
        from {
            background-position: 120% 0;
        }
        to {
            background-position: -20% 0;
        }
    }

    .btn--quiet,
    .btn--danger {
        --lip: var(--stone-900);
        --shine: rgb(255 255 255 / .1);
        background: var(--stone-600);
        color: var(--white);
    }

    .btn--quiet:hover:not(:disabled) {
        background: var(--stone-500);
    }

    .btn--danger:hover:not(:disabled),
    .btn.is-armed,
    .btn.is-armed:hover:not(:disabled) {
        --lip: var(--red-lo);
        --shine: rgb(255 255 255 / .2);
        background: var(--red);
        color: var(--white);
    }

    .btn--small {
        --depth: 3px;
        min-height: var(--control-s);
        padding-inline: var(--space-3);
        font-size: var(--text-s);
    }

    .btn--icon {
        min-width: var(--control);
        padding-inline: 0;
    }

    .btn--small.btn--icon {
        min-width: var(--control-s);
    }

    .btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .btn.is-busy {
        cursor: progress;
    }

    .segmented {
        --count: 2;
        --at: 0;
        position: relative;
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        isolation: isolate;
    }

    .segmented > .btn + .btn {
        border-left: 0;
    }

    .segmented > .btn[aria-pressed="true"] {
        --press: var(--accent-lo);
        background: var(--accent);
        color: var(--white);
    }

    .segmented:has(> :nth-child(3)) {
        --count: 3;
    }

    .segmented:has(> :nth-child(2)[aria-pressed="true"]) {
        --at: 1;
    }

    .segmented:has(> :nth-child(3)[aria-pressed="true"]) {
        --at: 2;
    }

    .segmented:has(> [aria-pressed="true"])::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 calc(var(--at) * 100% / var(--count) - min(var(--at), 1) * 2px);
        z-index: -1;
        width: calc(100% / var(--count) + min(var(--at), 1) * 2px);
        background: var(--accent);
        border: var(--edge);
        box-shadow: inset 0 3px var(--accent-lo);
        transition: left .32s var(--ease-spring), width .32s var(--ease-spring);
    }

    .segmented.is-instant::before {
        transition: none;
    }

    .segmented > .btn[aria-pressed="true"]:not(:disabled) {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    .btn,
    .icon-btn {
        --icon-color: currentColor;
    }

    .icon-btn {
        display: grid;
        flex: none;
        place-items: center;
        width: var(--control-s);
        height: var(--control-s);
        padding: 0;
        background: none;
        border: 0;
        color: var(--stone-200);
        cursor: pointer;
        transition: var(--hover);
    }

    .icon-btn:is(:hover, :focus-visible):not(:disabled) {
        background: var(--stone-600);
        color: var(--white);
        outline: none;
    }

    .icon-btn--danger:is(:hover, :focus-visible):not(:disabled),
    .icon-btn.is-failed {
        color: var(--red);
    }

    .icon-btn.is-armed,
    .icon-btn.is-armed:is(:hover, :focus-visible):not(:disabled) {
        grid-auto-flow: column;
        gap: var(--space-2);
        width: auto;
        padding-inline: var(--space-3);
        background: var(--red);
        color: var(--white);
    }

    .icon-btn.is-armed::after {
        content: attr(title);
        font-size: var(--text-s);
        font-weight: 700;
        white-space: nowrap;
    }

    .icon-btn.is-done {
        color: var(--green);
    }

    .icon-btn:disabled {
        opacity: .25;
        cursor: default;
    }

    .input {
        min-width: 0;
        min-height: var(--control);
        padding: 0 var(--space-3);
        background: var(--stone-900);
        border: var(--field-edge);
        box-shadow: var(--well);
        color: var(--white);
        font: 600 var(--text-l) var(--font-body);
        transition: var(--hover);
    }

    .input::placeholder {
        color: var(--stone-500);
    }

    .input:hover:not(:disabled) {
        border-color: var(--stone-500);
    }

    .input:is(:focus-visible, :focus-within),
    .input:is(:focus-visible, :focus-within):hover {
        border-color: var(--white);
        outline: none;
    }

    .is-invalid .input,
    .is-invalid .input:hover {
        border-color: var(--red);
    }

    textarea.input {
        padding-block: var(--space-3);
        font-weight: 500;
        line-height: 1.4;
        resize: vertical;
    }

    select.input {
        appearance: none;
        padding-right: calc(var(--space-3) * 2 + 10px);
        background: var(--stone-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3' shape-rendering='crispEdges'%3E%3Cpath fill='%23a0a1a4' d='M0 0h5v1H0zM1 1h3v1H1zM2 2h1v1H2z'/%3E%3C/svg%3E") right var(--space-3) center / 10px 6px no-repeat;
        cursor: pointer;
    }

    .input--small {
        min-height: var(--control-s);
        font-size: var(--text-m);
    }

    .field {
        display: grid;
        gap: var(--space-3);
        min-width: 0;
    }

    .stack {
        display: grid;
        align-content: start;
        gap: var(--space-5);
    }

    .inset {
        display: grid;
        gap: var(--space-4);
        padding: var(--space-4);
        background: var(--stone-800);
        border: var(--edge);
        box-shadow: inset 0 2px rgb(0 0 0 / .25);
    }

    .callout {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: rgb(255 207 63 / .08);
        border-left: var(--space-2) solid var(--gold);
    }

    .checkbox {
        appearance: none;
        flex: none;
        width: 18px;
        height: 18px;
        margin: 0;
        background: var(--stone-900) center / 0 no-repeat;
        border: var(--edge);
        box-shadow: var(--well);
        cursor: pointer;
        transition: background-color .15s, background-size .25s var(--ease-spring);
    }

    .checkbox:checked {
        background: var(--accent-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M6 1h2v1H6zM5 2h2v1H5zM4 3h2v1H4zM0 3h2v1H0zM3 4h2v1H3zM1 4h2v1H1zM2 5h2v1H2z'/%3E%3C/svg%3E") center / 8px no-repeat;
        box-shadow: inset 0 -2px var(--accent);
    }

    .checkbox:indeterminate {
        background: var(--accent-hi) linear-gradient(var(--white), var(--white)) center / 8px 2px no-repeat;
        box-shadow: inset 0 -2px var(--accent);
    }

    .checkbox:focus-visible {
        outline-offset: 1px;
    }

    .check {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: var(--space-4);
        cursor: pointer;
    }

    .check__text {
        display: grid;
        gap: var(--space-2);
    }

    .check__title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-m);
        font-weight: 700;
        line-height: 18px;
    }

    .switch {
        position: relative;
        display: inline-grid;
        flex: none;
        width: 46px;
        height: 24px;
    }

    .switch__input {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .switch__input:disabled {
        cursor: default;
    }

    .switch__track {
        position: relative;
        background: var(--stone-950);
        border: 2px solid var(--stone-500);
        box-shadow: inset 2px 2px rgb(0 0 0 / .5);
        transition: background-color .15s, border-color .15s;
    }

    .switch__track::before {
        content: "";
        position: absolute;
        top: 5px;
        right: 5px;
        width: 10px;
        height: 10px;
        border: 2px solid var(--stone-200);
    }

    .switch__track::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 20px;
        background: var(--stone-100);
        border: 2px solid var(--stone-950);
        box-shadow: inset 0 -3px rgb(0 0 0 / .25), inset 2px 2px rgb(255 255 255 / .5);
        transition: transform .28s var(--ease-spring), background-color .15s;
    }

    .switch__track.is-instant,
    .switch__track.is-instant::after {
        transition: none;
    }

    .switch__input:checked + .switch__track {
        background: var(--accent);
        border-color: var(--accent-hi);
        box-shadow: inset 2px 2px rgb(0 0 0 / .25);
    }

    .switch__input:checked + .switch__track::before {
        right: auto;
        left: 9px;
        width: 2px;
        height: 10px;
        background: var(--white);
        border: 0;
    }

    .switch__input:checked + .switch__track::after {
        transform: translateX(22px);
        background: var(--white);
        border-color: var(--accent-lo);
    }

    .switch__input:hover:not(:disabled) + .switch__track::after {
        background: var(--white);
    }

    .switch__input:focus-visible + .switch__track {
        outline: 2px solid var(--white);
        outline-offset: 2px;
    }

    .switch__input:disabled + .switch__track {
        opacity: .45;
    }

    .chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .chip input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .chip__label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-height: var(--control-s);
        padding: 0 var(--space-3);
        background: var(--stone-900);
        border: var(--field-edge);
        box-shadow: var(--well);
        color: var(--stone-100);
        font-size: var(--text-m);
        font-weight: 700;
        cursor: pointer;
        transition: var(--hover);
    }

    .chip:hover .chip__label {
        border-color: var(--stone-500);
    }

    .chip input:focus-visible + .chip__label {
        background: var(--stone-700);
    }

    .chip input:checked + .chip__label {
        background: var(--stone-600);
        box-shadow: none;
        color: var(--white);
        outline: 2px solid var(--white);
        outline-offset: 1px;
    }

    .chip--new .chip__label {
        color: var(--stone-200);
    }

    .list {
        display: grid;
        align-content: start;
        gap: var(--space-2);
    }

    .row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-1) var(--space-4);
        width: 100%;
        min-height: var(--row);
        padding: var(--space-2) var(--space-3);
        background: var(--stone-800);
        border: 0;
        color: inherit;
        text-align: left;
        transition: var(--hover);
    }

    .row--action {
        cursor: pointer;
    }

    .row--action:hover:not(:disabled) {
        background: var(--stone-600);
    }

    .row__text {
        display: grid;
        gap: var(--space-1);
        min-width: 0;
    }

    .row__name {
        overflow: hidden;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .row__meta {
        overflow: hidden;
        color: var(--stone-200);
        font: var(--text-s)/1.4 var(--font-mono);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu {
        min-width: 220px;
        margin: 0;
        padding: var(--space-2);
        overflow-y: auto;
    }

    .menu__header {
        padding: var(--space-3);
    }

    .menu__group {
        display: grid;
    }

    .menu__group:not(:first-child) {
        margin-top: var(--space-2);
        padding-top: var(--space-2);
        border-top: var(--divider);
        box-shadow: var(--bevel);
    }

    .menu__group:not(:has(> .menu__item:not([hidden]))) {
        display: none;
    }

    .menu__label {
        padding: var(--space-3) var(--space-3) var(--space-2);
    }

    .menu__item {
        --icon-color: var(--stone-200);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        min-height: var(--control-s);
        padding: var(--space-2) var(--space-3);
        background: none;
        border: 0;
        color: var(--white);
        font: 600 var(--text-m) var(--font-body);
        text-align: left;
        cursor: pointer;
        transition: var(--hover);
    }

    .menu__item:is(:hover, :focus-visible) {
        --icon-color: var(--white);
        background: var(--stone-600);
        outline: none;
    }

    .menu__item[aria-current="true"] {
        background: var(--stone-800);
        box-shadow: inset 4px 0 var(--accent-hi);
    }

    .menu__item--danger:is(:hover, :focus-visible),
    .menu__item.is-armed {
        --icon-color: var(--red);
        color: var(--red);
    }

    .menu__item.is-done {
        --icon-color: currentColor;
        color: var(--green);
    }

    .menu__item.is-done::before,
    .account-pair.is-copied::before,
    .btn[data-icon="check"]::before,
    .about__version [data-icon="check"]::before {
        animation: pop .35s var(--ease-spring);
    }

    @keyframes pop {
        from {
            scale: 0;
        }
    }

    .menu__item.is-failed {
        --icon-color: currentColor;
        color: var(--red);
    }

    .menu__item:disabled {
        opacity: .5;
        cursor: default;
    }

    .dialog {
        inset-block-start: var(--safe-top);
        width: min(var(--dialog-w, 380px), 100vw - 2 * var(--gap));
        max-width: none;
        max-height: calc(var(--view-h) - 2 * var(--gap));
        margin: auto;
        padding: 0;
        overflow: hidden;
    }

    .dialog[open] {
        display: flex;
        flex-direction: column;
    }

    .dialog::backdrop {
        background: var(--backdrop);
    }

    .dialog--m {
        --dialog-w: 620px;
    }

    .dialog--l {
        --dialog-w: 920px;
        height: min(760px, var(--view-h) - 2 * var(--gap));
    }

    .dialog__form {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    .dialog__header {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--space-4);
        min-height: 60px;
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
        border-bottom: var(--divider);
        box-shadow: 0 2px rgb(255 255 255 / .06);
    }

    .dialog__header > .icon-btn {
        margin-left: auto;
    }

    .dialog__heading {
        display: grid;
        gap: var(--space-2);
        min-width: 0;
    }

    .dialog__subtitle {
        overflow: hidden;
        color: var(--stone-200);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dialog__tools {
        display: flex;
        flex: none;
        flex-wrap: wrap;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5) 0;
    }

    .dialog__tools > [type="search"] {
        flex: 1 1 12rem;
    }

    #icons .dialog__tools > [type="search"] {
        flex-basis: 16rem;
    }

    .dialog__body {
        flex: 1;
        min-height: 0;
        padding: var(--space-5);
        overflow-y: auto;
    }

    .dialog__footer {
        display: flex;
        flex: none;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        background: var(--stone-800);
        border-top: var(--divider);
        box-shadow: var(--bevel);
    }

    .dialog__footer > .btn--danger {
        margin-right: auto;
    }

    .dialog__footer > .note {
        flex: 1 1 12rem;
    }

    .toolbar {
        position: absolute;
        top: var(--gap);
        left: 50%;
        z-index: 1000;
        max-width: calc(100% - 2 * var(--gap));
        translate: -50% 0;
    }

    .progress {
        overflow: hidden;
        height: 12px;
        background: var(--stone-900);
        border: var(--edge);
    }

    .progress__fill {
        width: 0;
        height: 100%;
        background: var(--accent-hi);
        box-shadow: inset 0 -3px var(--accent);
        transition: width .3s ease;
    }

    .progress.is-indeterminate .progress__fill {
        width: 25%;
        transition: none;
        animation: progress-slide 1.6s steps(16) infinite;
    }

    @keyframes progress-slide {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translateX(400%);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .progress.is-indeterminate .progress__fill {
            width: 100%;
            animation: none;
        }
    }

    .hints {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
        color: var(--stone-200);
        font-size: var(--text-s);
    }

    .hints > span {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .marker-icon {
        display: grid;
        flex: none;
        place-items: center;
        width: 24px;
        height: 24px;
    }

    .marker-icon--point {
        color: var(--marker);
    }

    .marker-icon--point .waypoint__badge {
        width: 24px;
        height: 30px;
    }

    .marker-icon--personal.marker-icon--point .waypoint__badge {
        width: 28px;
        height: 34px;
    }

    .marker-icon--area::before {
        content: "";
        width: 18px;
        height: 18px;
        background: color-mix(in srgb, var(--marker) 35%, transparent);
        border: 2px solid var(--marker);
        box-shadow: 0 0 0 2px var(--stone-900);
    }

    .marker-icon--line::before {
        content: "";
        width: 20px;
        height: 4px;
        background: var(--marker);
        box-shadow: 0 0 0 2px var(--stone-900);
        transform: rotate(-30deg);
    }

    .marker-icon--personal.marker-icon--area::before {
        border-style: dashed;
    }

    .marker-icon--personal.marker-icon--line::before {
        background: repeating-linear-gradient(90deg, var(--marker) 0 5px, var(--stone-900) 5px 8px);
    }

    .marker-icon--world::before,
    .marker-icon--place::before {
        content: "";
        width: 18px;
        height: 18px;
        background: var(--stone-600);
        border: var(--edge);
        box-shadow: inset 2px 2px rgb(255 255 255 / .12);
    }

    .marker-icon--place::before {
        background: var(--gold);
    }

    .map-btn,
    .leaflet-touch .leaflet-bar a,
    .leaflet-bar a {
        display: grid;
        place-items: center;
        width: var(--map-button);
        height: var(--map-button);
        padding: 0 0 var(--space-2);
        background: var(--stone-700);
        border: var(--edge);
        border-radius: 0;
        color: var(--white);
        font: 700 var(--text-l)/1 var(--font-display);
        box-shadow: inset 2px 2px rgb(255 255 255 / .1), inset 0 -4px var(--stone-800), var(--raised);
        cursor: pointer;
        transition: var(--hover);
    }

    .map-btn:hover:not(:disabled),
    .leaflet-bar a:hover {
        background: var(--stone-600);
        color: var(--white);
    }

    .map-btn:active:not(:disabled),
    .map-btn.is-keyed:not(:disabled),
    .leaflet-bar a:active {
        padding: var(--space-2) 0 0;
        box-shadow: inset 0 4px rgb(0 0 0 / .3), var(--raised);
    }

    .map-btn:disabled {
        cursor: default;
    }
}

@layer features {
    [data-icon="desktop"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h8v1H0zM0 1h1v4H0zM7 1h1v4H7zM0 5h8v1H0zM3 6h2v1H3zM2 7h4v1H2z'/></svg>");
    }

    [data-icon="phone"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h4v1H2zM2 1h1v6H2zM5 1h1v6H5zM2 7h4v1H2zM3 5h2v1H3z'/></svg>");
    }

    [data-icon="tablet"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M1 0h6v1H1zM1 1h1v6H1zM6 1h1v6H6zM1 7h6v1H1zM3 5h2v1H3z'/></svg>");
    }

    [data-icon="game"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M6 0h2v1H6zM5 1h1v1H5zM7 1h1v1H7zM4 2h1v1H4zM6 2h1v1H6zM1 3h1v1H1zM3 3h1v1H3zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM2 5h2v1H2zM1 6h1v1H1zM4 6h1v1H4zM0 7h1v1H0z'/></svg>");
    }

    [data-icon="logout"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h4v1H0zM0 1h1v6H0zM0 7h4v1H0zM2 3h3v2H2zM5 2h1v4H5zM6 3h1v2H6z'/></svg>");
    }

    [data-icon="close"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h1v1H0zM7 0h1v1H7zM1 1h1v1H1zM6 1h1v1H6zM2 2h1v1H2zM5 2h1v1H5zM3 3h2v1H3zM3 4h2v1H3zM2 5h1v1H2zM5 5h1v1H5zM1 6h1v1H1zM6 6h1v1H6zM0 7h1v1H0zM7 7h1v1H7z'/></svg>");
    }

    [data-icon="copy"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h6v1H0zM0 1h1v5H0zM5 1h1v1H5zM1 5h1v1H1zM2 2h6v1H2zM2 7h6v1H2zM2 3h1v4H2zM7 3h1v4H7z'/></svg>");
    }

    [data-icon="check"],
    .menu__item.is-done:is([data-icon="copy"], [data-icon="link"]) {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M6 1h2v1H6zM5 2h2v1H5zM4 3h2v1H4zM0 3h2v1H0zM3 4h2v1H3zM1 4h2v1H1zM2 5h2v1H2z'/></svg>");
    }

    [data-icon="chevron"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'><path d='M3 0h1v7H3zM2 1h1v5H2zM1 2h1v3H1zM0 3h1v1H0z'/></svg>");
    }

    [data-icon="rotate"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h4v1H2zM7 0h1v1H7zM1 1h1v1H1zM6 1h2v1H6zM0 2h1v1H0zM5 2h3v1H5zM0 3h1v1H0zM0 4h1v1H0zM7 4h1v1H7zM0 5h1v1H0zM7 5h1v1H7zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/></svg>");
    }

    [data-icon="undo"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h1v1H2zM1 1h2v1H1zM0 2h6v1H0zM1 3h2v1H1zM6 3h1v1H6zM2 4h1v1H2zM7 4h1v1H7zM7 5h1v1H7zM6 6h1v1H6zM3 7h3v1H3z'/></svg>");
    }

    [data-icon="info"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h4v1H2zM1 1h1v1H1zM6 1h1v1H6zM0 2h1v4H0zM7 2h1v4H7zM3 2h2v1H3zM3 4h2v2H3zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/></svg>");
    }

    [data-icon="keys"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 1h8v1H0zM0 7h8v1H0zM0 2h1v5H0zM7 2h1v5H7zM2 3h1v1H2zM5 3h1v1H5zM2 5h4v1H2z'/></svg>");
    }

    [data-icon="language"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h4v1H2zM1 1h1v1H1zM6 1h1v1H6zM0 2h1v4H0zM7 2h1v4H7zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2zM3 1h2v1H3zM3 6h2v1H3zM2 2h1v4H2zM5 2h1v4H5zM1 4h6v1H1z'/></svg>");
    }

    [data-icon="navigate"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M6 0h2v1H6zM4 1h4v1H4zM2 2h5v1H2zM0 3h7v1H0zM4 4h2v1H4zM4 5h2v1H4zM4 6h1v1H4zM4 7h1v1H4z'/></svg>");
    }

    [data-icon="teleport"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h4v1H2zM1 1h1v1H1zM6 1h1v1H6zM0 2h1v1H0zM3 2h2v1H3zM7 2h1v1H7zM0 3h1v1H0zM2 3h1v1H2zM5 3h1v1H5zM7 3h1v1H7zM0 4h1v1H0zM2 4h1v1H2zM5 4h1v1H5zM7 4h1v1H7zM0 5h1v1H0zM3 5h2v1H3zM7 5h1v1H7zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/></svg>");
    }

    [data-icon="pin"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 8 8' shape-rendering='crispEdges'><path d='M1 0h5v1H1zM0 1h7v1H0zM0 2h3v1H0zM4 2h3v1H4zM0 3h2v1H0zM5 3h2v1H5zM0 4h3v1H0zM4 4h3v1H4zM1 5h5v1H1zM2 6h3v1H2zM3 7h1v1H3z'/></svg>");
    }

    [data-icon="image"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h8v1H0zM0 7h8v1H0zM0 1h1v6H0zM7 1h1v6H7zM5 2h1v1H5zM2 3h1v1H2zM1 4h3v1H1zM5 4h1v1H5zM1 5h6v1H1z'/></svg>");
    }

    [data-icon="area"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h8v1H0zM0 7h8v1H0zM0 1h1v6H0zM7 1h1v6H7z'/><path d='M1 1h6v6H1z' fill-opacity='.35'/></svg>");
    }

    [data-icon="line"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 6h2v2H0zM2 5h1v1H2zM3 4h1v1H3zM4 3h1v1H4zM5 2h1v1H5zM6 0h2v2H6z'/></svg>");
    }

    [data-icon="select"],
    [data-icon="limits"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h3v1H0zM0 1h1v2H0zM5 0h3v1H5zM7 1h1v2H7zM0 5h1v2H0zM0 7h3v1H0zM7 5h1v2H7zM5 7h3v1H5zM3 3h2v2H3z'/></svg>");
    }

    [data-icon="refresh"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h4v1H2zM1 1h1v1H1zM6 1h2v1H6zM0 2h1v1H0zM5 2h3v1H5zM0 3h1v1H0zM7 4h1v1H7zM0 5h3v1H0zM7 5h1v1H7zM0 6h2v1H0zM6 6h1v1H6zM2 7h4v1H2z'/></svg>");
    }

    [data-icon="cancel"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h2v1H0zM6 0h2v1H6zM1 1h2v1H1zM5 1h2v1H5zM2 2h4v1H2zM3 3h2v2H3zM2 5h4v1H2zM1 6h2v1H1zM5 6h2v1H5zM0 7h2v1H0zM6 7h2v1H6z'/></svg>");
    }

    [data-icon="link"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M1 1h3v1H1zM0 2h1v3H0zM4 2h3v1H4zM3 3h2v2H3zM7 3h1v3H7zM1 5h3v1H1zM4 6h3v1H4z'/></svg>");
    }

    [data-icon="center"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 0h2v1H3zM3 1h2v1H3zM0 3h2v1H0zM3 3h2v1H3zM6 3h2v1H6zM0 4h2v1H0zM3 4h2v1H3zM6 4h2v1H6zM3 6h2v1H3zM3 7h2v1H3z'/></svg>");
    }

    [data-icon="move"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 -0.5 8 8' shape-rendering='crispEdges'><path d='M3 0h1v1H3zM2 1h3v1H2zM1 2h1v1H1zM3 2h1v1H3zM5 2h1v1H5zM0 3h7v1H0zM1 4h1v1H1zM3 4h1v1H3zM5 4h1v1H5zM2 5h3v1H2zM3 6h1v1H3z'/></svg>");
    }

    [data-icon="here"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 0h2v1H3zM2 1h1v1H2zM5 1h1v1H5zM2 2h1v1H2zM5 2h1v1H5zM3 3h2v1H3zM2 5h4v1H2zM1 6h1v1H1zM6 6h1v1H6zM0 7h1v1H0zM7 7h1v1H7z'/></svg>");
    }

    [data-icon="edit"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M6 0h2v1H6zM5 1h1v1H5zM7 1h1v1H7zM4 2h1v1H4zM6 2h1v1H6zM3 3h1v1H3zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM1 5h1v1H1zM3 5h1v1H3zM0 6h3v1H0zM0 7h2v1H0z'/></svg>");
    }

    [data-icon="show"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 2h4v1H2zM1 3h1v1H1zM3 3h2v1H3zM6 3h1v1H6zM0 4h1v1H0zM3 4h2v1H3zM7 4h1v1H7zM1 5h1v1H1zM6 5h1v1H6zM2 6h4v1H2z'/></svg>");
    }

    [data-icon="hide"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM4 2h2v1H4zM1 3h1v1H1zM3 3h1v1H3zM6 3h1v1H6zM0 4h1v1H0zM4 4h1v1H4zM7 4h1v1H7zM1 5h1v1H1zM5 5h1v1H5zM2 6h3v1H2zM6 6h1v1H6zM7 7h1v1H7z'/></svg>");
    }

    [data-icon="reset"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 1h2v1H3zM2 2h5v1H2zM1 3h7v1H1zM0 4h8v2H0zM1 6h6v1H1z'/></svg>");
    }

    [data-icon="delete"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M2 0h4v1H2zM0 1h8v1H0zM1 2h1v1H1zM6 2h1v1H6zM1 3h1v1H1zM3 3h2v1H3zM6 3h1v1H6zM1 4h1v1H1zM3 4h2v1H3zM6 4h1v1H6zM1 5h1v1H1zM3 5h2v1H3zM6 5h1v1H6zM1 6h1v1H1zM6 6h1v1H6zM2 7h4v1H2z'/></svg>");
    }

    [data-icon="up"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 1h2v1H3zM2 2h4v1H2zM1 3h6v1H1zM3 4h2v3H3z'/></svg>");
    }

    [data-icon="down"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 1h2v3H3zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3z'/></svg>");
    }

    [data-icon="gear"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 0h2v1H3zM1 1h1v1H1zM3 1h2v1H3zM6 1h1v1H6zM2 2h4v1H2zM0 3h3v1H0zM5 3h3v1H5zM0 4h3v1H0zM5 4h3v1H5zM2 5h4v1H2zM1 6h1v1H1zM3 6h2v1H3zM6 6h1v1H6zM3 7h2v1H3z'/></svg>");
    }

    [data-icon="worlds"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M5 1h2v2H5zM2 3h1v1H2zM1 4h3v1H1zM6 4h1v1H6zM0 5h5v1H0zM6 5h2v1H6zM0 6h8v2H0z'/></svg>");
    }

    [data-icon="map"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h6v1H0zM0 1h7v1H0zM0 2h6v1H0zM0 3h1v5H0z'/></svg>");
    }

    [data-icon="layers"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M1 0h6v2H1zM0 3h8v2H0zM1 6h6v2H1z'/></svg>");
    }

    [data-icon="rendering"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M7 0h1v1H7zM6 1h2v1H6zM5 2h2v1H5zM4 3h2v1H4zM2 4h3v1H2zM1 5h4v1H1zM0 6h4v1H0zM0 7h2v1H0z'/></svg>");
    }

    [data-icon="storage"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M1 0h6v1H1zM0 1h1v6H0zM7 1h1v6H7zM1 2h6v1H1zM1 4h6v1H1zM1 7h6v1H1z'/></svg>");
    }

    [data-icon="views"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M3 0h2v1H3zM1 1h6v1H1zM3 2h2v1H3zM0 3h2v1H0zM6 3h2v1H6zM0 4h3v2H0zM5 4h3v2H5zM1 6h2v1H1zM5 6h2v1H5zM2 7h1v1H2zM5 7h1v1H5z'/></svg>");
    }

    [data-icon="web"] {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill-rule='evenodd' d='M0 0h8v3H0zM1 1h1v1H1zM0 5h8v3H0zM1 6h1v1H1z'/></svg>");
    }

    .topbar {
        display: flex;
        align-items: center;
        gap: var(--space-6);
        padding: var(--safe-top) var(--gap) 0;
        background: var(--black);
        border-bottom: 2px solid var(--stone-800);
        z-index: 1100;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex: none;
        color: var(--white);
        font: 700 var(--display-m)/1 var(--font-display);
        letter-spacing: .02em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .brand__icon {
        width: 28px;
        height: 28px;
    }

    .server-name {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 24ch;
        padding-left: var(--space-6);
        border-left: 2px solid var(--stone-800);
        overflow: hidden;
        font-weight: 600;
        line-height: 28px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .server-name.is-crowded {
        display: none;
    }

    .worlds {
        position: relative;
        display: flex;
        flex: 1 1 0;
        align-self: stretch;
        gap: var(--space-2);
        min-width: 0;
        overflow: hidden;
    }

    .worlds::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: var(--slide-w, 0);
        height: 4px;
        background: var(--accent-hi);
        box-shadow: inset 0 -2px var(--accent), 0 0 16px rgb(212 115 47 / .55);
        translate: var(--slide-x, 0) 0;
        pointer-events: none;
    }

    .worlds.is-sliding::after {
        transition: translate .32s var(--ease-spring), width .32s var(--ease-spring);
    }

    .worlds.is-compact::after {
        display: none;
    }

    .worlds.is-compact .world-tab:not(.world-switch),
    .worlds:not(.is-compact) .world-switch {
        display: none;
    }

    .worlds:not(:has(button)) {
        align-items: center;
        color: var(--stone-200);
        font-size: var(--text-m);
    }

    .world-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: var(--space-1);
        flex: none;
        min-width: 120px;
        padding: 0 var(--space-5);
        background: none;
        border: 0;
        color: var(--stone-100);
        cursor: pointer;
        text-align: left;
        white-space: nowrap;
    }

    .world-tab__name {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 700;
    }

    .world-tab::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 4px;
        scale: 0 1;
        transition: scale .3s var(--ease-out), background-color .15s;
    }

    .world-tab {
        transition: var(--hover);
    }

    .world-tab:hover {
        background: var(--stone-800);
    }

    .world-tab:hover::after {
        background: var(--stone-500);
        scale: 1;
    }

    .world-tab[aria-current="true"],
    .world-switch {
        background: var(--stone-700);
        box-shadow: inset 2px 2px rgb(255 255 255 / .08);
        color: var(--white);
    }

    .world-tab[aria-current="true"] .label,
    .world-switch .label {
        color: var(--stone-100);
    }

    .world-switch::after {
        background: var(--accent-hi);
        box-shadow: inset 0 -2px var(--accent), 0 0 16px rgb(212 115 47 / .55);
        scale: 1;
    }

    .world-tab[aria-current="true"]:not(.world-switch)::after {
        visibility: hidden;
    }

    .world-switch {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-4);
        min-width: 0;
    }

    .world-switch:hover {
        background: var(--stone-600);
    }

    .world-switch__label {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

    .world-switch__chevron {
        flex: none;
        color: var(--stone-200);
    }

    .world-menu {
        inset: var(--topbar-h) auto auto var(--switch-left, var(--gap));
        width: 260px;
        max-height: calc(100dvh - var(--topbar-h) - var(--gap));
    }

    .private-icon,
    .personal-icon {
        display: inline-flex;
        flex: none;
        color: var(--gold);
    }

    .personal-icon {
        color: var(--accent-hi);
    }

    .status {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-left: auto;
        flex: none;
        color: var(--stone-100);
        font-size: var(--text-m);
    }

    .status__dot {
        width: 10px;
        height: 10px;
        background: var(--gold);
        box-shadow: 0 0 0 2px var(--stone-900);
    }

    .status__dot[data-state="connected"] {
        background: var(--green);
        animation: live 2.8s var(--ease-out) infinite;
    }

    @keyframes live {
        from {
            box-shadow: 0 0 0 2px var(--stone-900), 0 0 0 2px rgb(82 165 53 / .7);
        }
        60%, to {
            box-shadow: 0 0 0 2px var(--stone-900), 0 0 0 9px rgb(82 165 53 / 0);
        }
    }

    .status__dot[data-state="disconnected"] {
        background: var(--red);
    }

    .status__dot[data-state="connecting"] {
        animation: blink 1s steps(2, jump-none) infinite;
    }

    @keyframes blink {
        50% {
            opacity: .3;
        }
    }

    .topbar__control {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        height: var(--control-s);
        padding: 0 var(--space-3);
        background: var(--stone-900);
        border: var(--field-edge);
        color: var(--stone-200);
        font-size: var(--text-m);
        cursor: pointer;
        box-shadow: var(--well);
    }

    .topbar__control:hover {
        border-color: var(--stone-200);
        color: var(--white);
    }

    .search-button {
        padding-right: var(--space-2);
    }

    .search-button__icon {
        width: 12px;
        height: 12px;
    }

    .account-button {
        width: var(--control-s);
        padding: 0;
    }

    .account-button__icon {
        width: 16px;
        height: 16px;
    }

    .account-button:has(.account-button__head:not([hidden])) .account-button__icon {
        display: none;
    }

    .account-button__head {
        width: 24px;
        height: 24px;
        image-rendering: pixelated;
    }

    .account-menu {
        inset: var(--topbar-h) var(--gap) auto auto;
        width: 280px;
        max-height: calc(100dvh - var(--topbar-h) - var(--gap));
    }

    .account-menu__text {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-m);
    }

    .account-pair {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: calc(100% - 2 * var(--space-3));
        margin: var(--space-2) var(--space-3);
        padding: var(--space-3);
        background: var(--stone-900);
        border: var(--field-edge);
        color: var(--stone-200);
        font: 500 var(--text-m)/1 var(--font-mono);
        cursor: pointer;
        box-shadow: var(--well);
    }

    .account-pair:is(:hover, :focus-visible):not(:disabled) {
        border-color: var(--stone-200);
        color: var(--white);
        outline: none;
    }

    .account-pair b {
        color: var(--white);
        font-weight: 700;
        letter-spacing: .1em;
    }

    .account-pair.is-copied {
        --icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M6 1h2v1H6zM5 2h2v1H5zM4 3h2v1H4zM0 3h2v1H0zM3 4h2v1H3zM1 4h2v1H1zM2 5h2v1H2z'/></svg>");
        border-color: var(--green);
        color: var(--green);
    }

    .account-pair:disabled {
        cursor: default;
    }

    .account-pair.is-expired b {
        color: var(--stone-500);
        text-decoration: line-through;
    }

    .account-profile {
        display: flex;
        align-items: center;
        gap: var(--space-4);
    }

    .account-profile__head {
        flex: none;
        width: 36px;
        height: 36px;
        border: var(--edge);
        image-rendering: pixelated;
    }

    .account-profile__text {
        display: grid;
        gap: var(--space-2);
        min-width: 0;
    }

    .account-profile__name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-language select {
        margin-left: auto;
    }

    .device {
        --icon-color: var(--stone-200);
    }

    .device.is-current {
        --icon-color: var(--green);
    }

    .device.is-current .row__meta {
        color: var(--green);
    }

    .devices__qr {
        display: grid;
        justify-items: center;
        gap: var(--space-3);
        text-align: center;
    }

    .devices__code {
        width: 100%;
        max-width: 224px;
    }

    .devices__code svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .devices__qr.is-expired .devices__code {
        opacity: .2;
    }

    .stage {
        position: relative;
        min-height: 0;
        overflow: clip;
    }

    #map {
        position: absolute;
        inset: 0;
    }

    .panel {
        position: absolute;
        top: var(--gap);
        left: var(--gap);
        bottom: var(--gap);
        width: var(--panel-w);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        pointer-events: none;
        transition: transform .35s var(--ease-out);
    }

    .panel > * {
        pointer-events: auto;
    }

    .panel.is-collapsed {
        transform: translateX(calc(-100% - var(--gap)));
    }

    .panel__toggle {
        position: absolute;
        top: 0;
        left: 100%;
        display: grid;
        place-items: center;
        width: 28px;
        height: 48px;
        padding: 0;
        background: var(--stone-700);
        border: var(--edge);
        border-left: 0;
        color: var(--stone-100);
        cursor: pointer;
        box-shadow: inset 2px 2px rgb(255 255 255 / .1);
        transition: transform .35s var(--ease-out), var(--hover);
    }

    .panel__toggle::before {
        width: 8px;
        height: 14px;
    }

    .panel__toggle:hover {
        background: var(--stone-600);
        color: var(--white);
    }

    .panel.is-collapsed .panel__toggle {
        border: var(--edge);
        transform: translateX(var(--gap));
    }

    .panel.is-collapsed .panel__toggle::before {
        rotate: 180deg;
    }

    .panel__body {
        display: flex;
        flex-direction: column;
        max-height: 100%;
        overflow-y: auto;
    }

    @supports (animation-timeline: scroll()) {
        .panel__body::before,
        .panel__body::after {
            content: "";
            position: sticky;
            z-index: 1;
            flex: none;
            height: var(--space-6);
            pointer-events: none;
            opacity: 0;
            animation: fade-edge linear both;
            animation-timeline: scroll(nearest);
        }

        .panel__body::before {
            top: 0;
            margin-bottom: calc(-1 * var(--space-6));
            background: linear-gradient(var(--stone-700), transparent);
            animation-range: 0 var(--space-6);
        }

        .panel__body::after {
            bottom: 0;
            margin-top: calc(-1 * var(--space-6));
            background: linear-gradient(transparent, var(--stone-700));
            animation-direction: reverse;
            animation-range: calc(100% - var(--space-6)) 100%;
        }

        .dialog__body,
        .search__results {
            mask-image: linear-gradient(transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
            animation: fade-start linear both, fade-end linear both;
            animation-timeline: scroll(self);
            animation-range: 0 var(--space-6), calc(100% - var(--space-6)) 100%;
        }
    }

    @keyframes fade-edge {
        to {
            opacity: 1;
        }
    }

    @keyframes fade-start {
        to {
            --fade-start: var(--space-6);
        }
    }

    @keyframes fade-end {
        from {
            --fade-end: var(--space-6);
        }
    }

    :root:not(.is-ready) :is(.panel > *, .leaflet-control-container .leaflet-control, .hud) {
        visibility: hidden;
    }

    .is-ready :is(.panel > *, .panel__section, .leaflet-control-container .leaflet-control, .hud) {
        animation: rise .6s var(--ease-out) calc(var(--order, 0) * 60ms) backwards;
    }

    .is-ready .panel > * {
        --rise-from: -32px 0;
    }

    .is-ready .panel__section {
        --rise-from: -12px 0;
    }

    .panel__section:nth-child(2) {
        --order: 1;
    }

    .panel__section:nth-child(3) {
        --order: 2;
    }

    .panel__section:nth-child(4) {
        --order: 3;
    }

    .is-ready .leaflet-control-container .leaflet-control {
        --rise-from: 32px 0;
        --order: 1;
    }

    .leaflet-control-container .leaflet-control + .leaflet-control {
        --order: 2;
    }

    .leaflet-control-container .leaflet-control + .leaflet-control + .leaflet-control {
        --order: 3;
    }

    .is-ready .hud {
        --rise-from: 0 16px;
        --order: 4;
    }

    .panel__section {
        display: grid;
        gap: var(--space-4);
        padding: var(--gap);
    }

    .panel__section + .panel__section {
        border-top: var(--divider);
        box-shadow: var(--bevel);
    }

    .rotation {
        display: grid;
        grid-template-columns: var(--control) 1fr var(--control);
    }

    .rotation .btn[data-turn="1"]::before,
    #selection-redo::before,
    #icon-editor-redo::before {
        scale: -1 1;
    }

    .rotation output {
        display: grid;
        place-items: center;
        overflow: clip;
        background: var(--stone-900);
        font: 600 var(--text-l) var(--font-mono);
        text-transform: capitalize;
    }

    .rotation output > span {
        display: inline-block;
    }

    .rotation output > .is-from-left {
        --from: -20px;
        animation: turn-in .32s var(--ease-spring);
    }

    .rotation output > .is-from-right {
        --from: 20px;
        animation: turn-in .32s var(--ease-spring);
    }

    @keyframes turn-in {
        from {
            opacity: 0;
            translate: var(--from) 0;
        }
    }

    .tooltip {
        inset: auto;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        padding: var(--space-2) var(--space-3);
        overflow: visible;
        background: var(--stone-900);
        border: var(--edge);
        box-shadow: var(--raised);
        color: var(--stone-100);
        font: 600 var(--text-s)/1 var(--font-body);
        white-space: nowrap;
        pointer-events: none;
        animation: tooltip-in .15s var(--ease-out);
    }

    .tooltip:not(:popover-open) {
        display: none;
    }

    .tooltip > span {
        margin-right: var(--space-1);
    }

    @keyframes tooltip-in {
        from {
            opacity: 0;
            translate: 0 -3px;
        }
    }

    .render-what {
        font-weight: 600;
    }

    .render-detail {
        white-space: pre-line;
    }

    .layer__name {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 700;
    }

    .is-out-of-scale .layer__name {
        opacity: .55;
    }

    .player {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        cursor: pointer;
    }

    .player:disabled {
        cursor: default;
    }

    .player img {
        grid-row: span 2;
        width: 32px;
        height: 32px;
        background: var(--stone-900);
        border: 2px solid var(--player-color, var(--stone-900));
        image-rendering: pixelated;
    }

    .player .row__name {
        grid-column: 2;
    }

    .player__details {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-3);
        grid-column: 2;
    }

    .player__world {
        grid-area: 1 / 3 / 2 / 4;
        justify-self: end;
        max-width: 120px;
    }

    .player.is-hidden img {
        border-style: dashed;
        opacity: .55;
    }

    .player.is-spotted:not(:disabled, [aria-pressed="true"]) {
        background: var(--stone-600);
    }

    .player.is-elsewhere {
        background: var(--stone-900);
        box-shadow: inset 0 0 0 2px var(--stone-800);
    }

    .player.is-elsewhere:hover:not(:disabled) {
        background: var(--stone-700);
    }

    .player.is-elsewhere img {
        filter: grayscale(.6);
        opacity: .7;
    }

    .player.is-elsewhere .row__name {
        color: var(--stone-100);
    }

    .player.is-elsewhere .player__details {
        grid-column: 2 / 4;
    }

    .player[aria-pressed="true"] {
        background: var(--accent-lo);
        box-shadow: inset 4px 0 var(--accent-hi);
    }

    .player[aria-pressed="true"]::after {
        content: attr(data-following-label);
        grid-area: 1 / 3 / 3 / 4;
        color: var(--white);
        font-size: var(--text-s);
        font-weight: 700;
        text-transform: uppercase;
    }

    .shortcuts {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: var(--space-3) var(--space-4);
        font-size: var(--text-m);
    }

    .shortcuts dt {
        display: flex;
        gap: var(--space-2);
    }

    .shortcuts dd {
        color: var(--stone-100);
    }

    .about {
        --dialog-w: 320px;
    }

    #waypoint-editor {
        --dialog-w: 480px;
    }

    .about__close {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
    }

    .about__body {
        display: grid;
        justify-items: center;
        gap: var(--space-3);
        padding: var(--space-7) var(--space-6) var(--space-6);
        text-align: center;
    }

    .about__icon {
        width: 72px;
        height: 72px;
        margin-bottom: var(--space-3);
        filter: drop-shadow(0 6px 10px rgb(0 0 0 / .5));
        image-rendering: pixelated;
    }

    .about__name {
        font: 700 20px/1 var(--font-display);
        letter-spacing: .04em;
    }

    .about__tagline {
        color: var(--stone-200);
        font-size: var(--text-m);
    }

    .about__build {
        margin-top: var(--space-4);
        color: var(--accent-hi);
    }

    .about__version {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);
        background: var(--stone-900);
        border: var(--field-edge);
        color: var(--stone-200);
        font: 500 var(--text-m)/1 var(--font-mono);
        box-shadow: var(--well);
    }

    .about__version b {
        color: var(--white);
        font-weight: 700;
    }

    .about__commit {
        color: var(--accent-hi);
        text-underline-offset: 3px;
    }

    .about__commit:is(:hover, :focus-visible) {
        color: var(--white);
    }

    .about__version [data-icon="check"] {
        color: var(--green);
    }

    .about__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
        margin-top: var(--space-3);
    }

    .about__actions .btn {
        text-decoration: none;
    }

    .about__footer {
        display: grid;
        justify-items: center;
        gap: var(--space-2);
        padding: var(--space-4) var(--space-5);
        background: var(--stone-800);
        border-top: var(--divider);
        box-shadow: var(--bevel);
        color: var(--stone-200);
        font-size: var(--text-s);
    }

    .about__link {
        color: var(--stone-100);
        font-weight: 600;
    }

    .about__link:is(:hover, :focus-visible) {
        color: var(--white);
    }

    .leaflet-container {
        --void: #0b0b0c;
        background: var(--void);
        font: inherit;
    }

    #player-count {
        animation: bump .4s var(--ease-spring);
    }

    @keyframes bump {
        40% {
            scale: 1.35;
        }
    }

    #map::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 450;
        box-shadow: inset 0 0 120px rgb(0 0 0 / .35), inset 0 12px 16px -12px rgb(0 0 0 / .6);
        pointer-events: none;
    }

    #map[data-environment="NETHER"] {
        --void: #170909;
    }

    #map[data-environment="THE_END"] {
        --void: #0f0b17;
    }

    .leaflet-tile-pane {
        transition: filter .2s ease;
    }

    #map[data-style="gray"] .leaflet-tile-pane {
        filter: url("#stone-gray");
    }

    @supports (font: -apple-system-body) {
        #map[data-style="gray"] .leaflet-tile-pane {
            filter: grayscale(1) brightness(.565) contrast(.764);
        }
    }

    .leaflet-tile {
        --hatch: rgb(255 255 255 / .03);
        background: linear-gradient(45deg, var(--hatch) 25%, transparent 25% 50%, var(--hatch) 50% 75%, transparent 75%) 0 0 / 16px 16px;
        image-rendering: pixelated;
    }

    .leaflet-safari .leaflet-tile {
        image-rendering: -webkit-optimize-contrast;
    }

    .leaflet-right .leaflet-control {
        margin-right: var(--gap);
    }

    .leaflet-top .leaflet-control {
        margin-top: var(--space-3);
    }

    .leaflet-top .leaflet-control:first-child {
        margin-top: var(--gap);
    }

    .leaflet-bar,
    .leaflet-touch .leaflet-bar {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .leaflet-bar a + a,
    .leaflet-touch .leaflet-bar a + a {
        margin-top: -2px;
    }

    .leaflet-bar a.leaflet-disabled {
        background: var(--stone-800);
        color: var(--stone-500);
        cursor: default;
    }

    .compass__needle {
        shape-rendering: crispEdges;
        filter: drop-shadow(1px 1px 0 rgb(0 0 0 / .5));
        transition: rotate .7s var(--ease-spring);
    }

    .sky {
        gap: var(--space-1);
        align-content: center;
    }

    .sky[hidden] {
        display: none;
    }

    .sky-glyph {
        flex: none;
        filter: drop-shadow(1px 1px 0 rgb(0 0 0 / .5));
    }

    .sky__bar {
        --phase: var(--gold);
        width: 24px;
        height: 4px;
        background: linear-gradient(var(--phase), var(--phase)) 0 0 / calc(var(--progress) * 100%) 100% no-repeat var(--stone-900);
    }

    .sky__bar:is([data-phase="sunset"], [data-phase="sunrise"]) {
        --phase: var(--accent-hi);
    }

    .sky__bar[data-phase="night"] {
        --phase: var(--night);
    }

    .sky__bar[data-phase="stopped"] {
        --phase: var(--stone-500);
    }

    .sky-menu {
        inset: var(--sky-top) var(--sky-right) auto auto;
        width: min(300px, calc(100vw - var(--sky-right) - var(--gap)));
        max-height: calc(100dvh - var(--sky-top) - var(--gap));
    }

    .sky-menu__item {
        gap: var(--space-4);
        padding: var(--space-3);
    }

    .sky-menu__glyph {
        display: grid;
        flex: none;
        place-items: center;
        width: 56px;
        height: 56px;
        background: var(--stone-900);
        box-shadow: var(--well);
    }

    .sky-menu__text {
        display: grid;
        flex: 1;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        gap: var(--space-2) var(--space-3);
        min-width: 0;
    }

    .sky-menu__name {
        overflow: hidden;
        font-size: var(--text-l);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sky-menu__time {
        font: 600 var(--text-l)/1 var(--font-mono);
    }

    .sky-menu__detail {
        grid-column: 1 / -1;
        color: var(--stone-200);
        font-size: var(--text-s);
        font-weight: 400;
        line-height: 1.35;
    }

    .sky-menu__bar {
        grid-column: 1 / -1;
        width: auto;
    }

    @media (max-height: 480px) {
        .sky-menu__item {
            padding-block: var(--space-2);
        }

        .sky-menu__glyph {
            width: var(--row);
            height: var(--row);
        }
    }

    .leaflet-popup-content-wrapper,
    .leaflet-popup-tip {
        background: var(--stone-700);
        color: var(--white);
        border-radius: 0;
        box-shadow: 0 4px 16px rgb(0 0 0 / .5);
    }

    .leaflet-popup-content-wrapper {
        padding: 0;
        border: var(--edge);
        transform-origin: 50% 100%;
        animation: popup-in .24s var(--ease-spring);
    }

    @supports (backdrop-filter: blur(1px)) {
        .leaflet-popup-content-wrapper {
            background: var(--glass);
            backdrop-filter: var(--glass-blur);
        }
    }

    @keyframes popup-in {
        from {
            opacity: 0;
            translate: 0 8px;
            scale: .94;
        }
    }

    .leaflet-popup-content {
        margin: var(--space-3) var(--space-4);
        line-height: 1.5;
    }

    .marker-popup-frame .leaflet-popup-content {
        margin: 0;
    }

    .leaflet-container a.leaflet-popup-close-button {
        top: var(--space-3);
        right: var(--space-3);
        width: 24px;
        height: 24px;
        color: transparent;
        font-size: 0;
    }

    .leaflet-container a.leaflet-popup-close-button::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 12px;
        height: 12px;
        margin: auto;
        background: var(--icon-color, var(--stone-200));
        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path d='M0 0h1v1H0zM7 0h1v1H7zM1 1h1v1H1zM6 1h1v1H6zM2 2h1v1H2zM5 2h1v1H5zM3 3h2v1H3zM3 4h2v1H3zM2 5h1v1H2zM5 5h1v1H5zM1 6h1v1H1zM6 6h1v1H6zM0 7h1v1H0zM7 7h1v1H7z'/></svg>") center / contain no-repeat;
    }

    .leaflet-container a.leaflet-popup-close-button:is(:hover, :focus-visible) {
        background: var(--stone-600);
        outline: none;
    }

    .leaflet-container a.leaflet-popup-close-button:is(:hover, :focus-visible)::before {
        --icon-color: var(--white);
    }

    .marker-popup {
        display: grid;
        gap: var(--space-3);
        min-width: 180px;
        max-width: 300px;
        padding: var(--space-4) var(--space-4) var(--space-4);
        border-top: 4px solid var(--marker);
    }

    .marker-popup--player {
        --marker: var(--accent-hi);
    }

    .marker-popup__head {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .marker-popup__heading {
        display: grid;
        gap: var(--space-3);
        min-width: 0;
    }

    .marker-popup__badge {
        display: grid;
        flex: none;
        place-items: center;
        width: var(--row);
        height: var(--row);
        background: var(--stone-900);
        box-shadow: var(--well);
        color: var(--marker);
    }

    .marker-popup__badge svg {
        shape-rendering: crispEdges;
    }

    .marker-popup__layer {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-right: var(--space-6);
        white-space: nowrap;
    }

    .marker-popup__layer .personal-icon svg {
        width: 5px;
        height: 7px;
    }

    .marker-popup__title {
        margin-right: var(--space-6);
    }

    .marker-popup__facts {
        color: var(--stone-100);
        white-space: pre-line;
    }

    .marker-popup__description {
        font-size: var(--text-m);
        white-space: pre-line;
        overflow-wrap: anywhere;
    }

    .marker-popup__discovered {
        color: var(--gold);
        font-size: var(--text-s);
    }

    .marker-popup__discovered::before {
        content: "✦ ";
    }

    .marker-popup__details {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-2) var(--space-4);
        padding-top: var(--space-3);
        border-top: var(--divider);
        font-size: var(--text-m);
    }

    .marker-popup__details dt {
        color: var(--stone-200);
    }

    .marker-popup__details dd {
        overflow-wrap: anywhere;
    }

    .marker-popup:has(> .menu__group) {
        padding-bottom: var(--space-2);
    }

    .marker-popup > .menu__group {
        margin-inline: calc(-1 * var(--space-3));
    }

    .marker-popup > .menu__group + .menu__group {
        margin-top: calc(var(--space-2) - var(--space-3));
    }

    .waypoint-icon,
    .region-flag-icon,
    .region-name-icon {
        background: none;
        border: 0;
    }

    .waypoint {
        position: relative;
        width: 24px;
        height: 30px;
    }

    .waypoint__badge image,
    .icon-image {
        image-rendering: pixelated;
    }

    .icon-image--tint {
        filter: brightness(0) invert(1);
    }

    .waypoint__badge {
        display: block;
        shape-rendering: crispEdges;
        transition: translate .12s steps(2);
    }

    .waypoint-icon:hover .waypoint__badge {
        translate: 0 -2px;
    }

    .waypoint__label,
    .leaflet-tooltip.marker-tooltip,
    .region-name {
        padding: 3px calc(5px - .23em) 3px 5px;
        background: rgb(0 0 0 / .6);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: var(--white);
        font: 700 var(--display-m)/1 var(--font-display);
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .waypoint__label {
        position: absolute;
        bottom: calc(100% + var(--space-2));
        left: 50%;
        translate: -50% 0;
        pointer-events: none;
    }

    .waypoint__label {
        transition: opacity .15s, translate .2s var(--ease-out), visibility .2s;
    }

    .waypoint__label.is-hidden {
        visibility: hidden;
        opacity: 0;
        translate: -50% 4px;
    }

    .waypoint-icon:hover .waypoint__label {
        visibility: visible;
        opacity: 1;
        translate: -50% 0;
    }

    .leaflet-tooltip.marker-tooltip::before {
        display: none;
    }

    .region-name {
        display: block;
        translate: -50% -50%;
        pointer-events: none;
    }

    .region-flag {
        display: block;
        translate: 0 -100%;
        padding: 4px calc(6px - .23em) 4px 6px;
        background: var(--marker);
        box-shadow: 0 0 0 2px rgb(0 0 0 / .5), inset 0 2px rgb(255 255 255 / .25), inset 0 -2px rgb(0 0 0 / .2);
        color: var(--white);
        font: 700 var(--display-m)/1 var(--font-display);
        letter-spacing: .04em;
        text-shadow: 1px 1px 0 rgb(0 0 0 / .55);
        white-space: nowrap;
        pointer-events: none;
    }

    @supports (font: -apple-system-body) {
        .waypoint__label,
        .leaflet-tooltip.marker-tooltip,
        .region-name {
            padding-top: 2px;
            padding-bottom: 4px;
        }

        .region-flag {
            padding-top: 3px;
            padding-bottom: 5px;
        }
    }

    .player-marker__body {
        position: relative;
        width: 28px;
        height: 28px;
        transition: translate .25s var(--ease-spring);
        animation: arrive .5s var(--ease-out);
    }

    .player-marker__body.is-spotted {
        translate: 0 -4px;
    }

    @keyframes arrive {
        from {
            opacity: 0;
            scale: .2;
        }
        55% {
            opacity: 1;
            scale: 1.2;
        }
        75% {
            scale: .95;
        }
    }

    .player-marker img {
        position: relative;
        display: block;
        width: 28px;
        height: 28px;
        border: 2px solid var(--player-color, var(--white));
        box-shadow: 0 2px 0 1px rgb(0 0 0 / .5);
        image-rendering: pixelated;
        transition: box-shadow .25s;
    }

    .player-marker__body.is-spotted img {
        box-shadow: 0 6px 0 1px rgb(0 0 0 / .35);
    }

    .player-marker__body.is-spotted::after {
        animation-duration: .9s;
    }

    .map-mark {
        pointer-events: none;
        animation: mark-life 1.2s linear forwards;
    }

    .map-mark::before,
    .map-mark::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        border: 2px solid var(--accent-hi);
        box-shadow: 0 0 0 2px rgb(0 0 0 / .45);
        animation: mark-ring 1s var(--ease-out) both;
    }

    .map-mark::after {
        border-color: var(--white);
        animation-delay: .15s;
    }

    @keyframes mark-life {
        80% {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @keyframes mark-ring {
        from {
            width: 8px;
            height: 8px;
            opacity: 1;
        }
        to {
            width: 64px;
            height: 64px;
            opacity: 0;
        }
    }

    .player-marker__facing {
        position: absolute;
        inset: -10px;
        color: var(--player-color, var(--white));
        pointer-events: none;
    }

    .player-marker__facing svg {
        display: block;
        shape-rendering: crispEdges;
    }

    .player-marker__corner,
    .player-marker__facing.is-diagonal .player-marker__edge {
        display: none;
    }

    .player-marker__facing.is-diagonal .player-marker__corner {
        display: inline;
    }

    .player-marker__body.is-hidden {
        opacity: .55;
    }

    .player-marker__body.is-hidden img {
        border-style: dashed;
    }

    .player-marker.is-followed img {
        outline: 2px solid var(--white);
    }

    .player-marker__body::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid var(--player-color, var(--white));
        opacity: 0;
        pointer-events: none;
        animation: ping 3.2s var(--ease-out) infinite;
    }

    .player-marker.is-followed .player-marker__body::after {
        animation-duration: 1.6s;
    }

    .player-marker__body.is-hidden::after {
        display: none;
    }

    @keyframes ping {
        from {
            opacity: .8;
        }
        50%, to {
            opacity: 0;
            scale: 1.9;
        }
    }

    .navigation__icon,
    .navigation-target {
        display: flex;
        flex: none;
        color: var(--marker);
    }

    .navigation-target {
        filter: drop-shadow(0 0 1px rgb(0 0 0 / .6));
    }

    .context-menu {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1100;
    }

    .context-menu__title {
        color: var(--stone-100);
    }

    .placing,
    .navigation {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
        font-size: var(--text-m);
    }

    .navigation__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .placing.is-failed #placing-text {
        color: var(--red);
    }

    .stage:has(.placing:not([hidden])) .leaflet-container {
        cursor: crosshair;
    }

    .stage:has(.placing:not([hidden]), .selection:not([hidden])) .navigation {
        display: none;
    }

    .selection {
        display: grid;
        gap: var(--space-4);
        width: max-content;
        padding: var(--gap);
    }

    .selection__brush {
        display: flex;
        gap: var(--space-2);
    }

    .selection__mode {
        flex: 2 1 0;
    }

    .selection__size {
        flex: 3 1 0;
    }

    .selection__history {
        flex: none;
    }

    .selection__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .selection__done {
        margin-left: auto;
    }

    .selection__message {
        margin: 0 calc(-1 * var(--gap)) calc(-1 * var(--gap));
        padding: var(--space-4) var(--gap);
        background: var(--stone-800);
        border-top: var(--divider);
        color: var(--stone-200);
        font-size: var(--text-s);
    }

    .selection__message:not(.selection__message--keys) {
        width: 0;
        min-width: calc(100% + 2 * var(--gap));
    }

    .selection__message--keys {
        display: grid;
        grid-template-columns: max-content 1fr max-content 1fr;
        align-items: center;
        gap: var(--space-3);
    }

    .selection__key {
        display: flex;
    }

    .selection__action {
        color: var(--stone-100);
    }

    .selection.is-failed .selection__message {
        color: var(--red);
    }

    .selection.is-done .selection__message {
        color: var(--green);
    }

    @media (max-width: 1000px) {
        .selection__message--keys {
            grid-template-columns: max-content 1fr;
        }
    }

    @media (min-width: 721px) {
        .stage:has(.panel:not(.is-collapsed)) .toolbar {
            left: calc(50% + (var(--panel-w) - var(--gap)) / 2);
            max-width: calc(100% - var(--panel-w) - var(--map-button) - 4 * var(--gap));
        }
    }

    .hud {
        position: absolute;
        right: var(--gap);
        bottom: var(--gap);
        z-index: 1000;
        display: flex;
        gap: var(--space-4);
        padding: var(--space-3);
        pointer-events: none;
    }

    .hud span {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .hud b {
        min-width: 6ch;
        padding: var(--space-2) var(--space-2);
        background: var(--stone-900);
        color: var(--white);
        font: 600 var(--text-s)/1 var(--font-mono);
        text-align: right;
    }

    .discovery {
        position: absolute;
        top: 72px;
        left: 50%;
        z-index: 1100;
        display: grid;
        justify-items: center;
        gap: var(--space-3);
        min-width: 260px;
        max-width: calc(100% - 2 * var(--gap));
        padding: var(--space-5) var(--space-7);
        translate: -50% 0;
        border-bottom: 4px solid var(--accent);
        text-align: center;
        cursor: pointer;
    }

    .discovery.is-shown {
        animation: discovery-in .5s cubic-bezier(.2, .8, .3, 1.3) both, discovery-out .4s ease 4.6s forwards;
    }

    .discovery__title {
        color: var(--gold);
    }

    .discovery__name {
        overflow-wrap: anywhere;
        font-size: var(--text-2xl);
        font-weight: 800;
        line-height: 1.2;
    }

    .discovery__burst {
        position: absolute;
        inset: 50% auto auto 50%;
        pointer-events: none;
    }

    .discovery__burst i {
        position: absolute;
        width: 6px;
        height: 6px;
        margin: -3px;
        background: var(--gold);
        opacity: 0;
    }

    .discovery__burst i:nth-child(4n + 1) {
        background: var(--accent-hi);
    }

    .discovery__burst i:nth-child(4n + 2) {
        background: var(--white);
    }

    .discovery__burst i:nth-child(4n + 3) {
        width: 4px;
        height: 4px;
        margin: -2px;
        background: var(--green);
    }

    .discovery.is-shown .discovery__burst i {
        animation: discovery-spark 1.1s cubic-bezier(.1, .7, .3, 1) var(--delay) both;
    }

    @keyframes discovery-in {
        from {
            opacity: 0;
            transform: translateY(-12px) scale(.85);
        }
    }

    @keyframes discovery-out {
        to {
            opacity: 0;
            transform: translateY(-8px);
        }
    }

    @keyframes discovery-spark {
        15% {
            opacity: 1;
        }
        to {
            opacity: 0;
            transform: translate(var(--x), var(--y)) rotate(180deg);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .discovery.is-shown {
            animation: discovery-out .4s ease 4.6s forwards;
        }

        .discovery__burst {
            display: none;
        }
    }

    .offline {
        position: fixed;
        inset: 0;
        z-index: 1200;
        display: grid;
        place-items: center;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: var(--gap);
        overflow: hidden;
        background: rgb(12 12 13 / .55);
        border: 0;
        color: inherit;
        backdrop-filter: grayscale(1) blur(6px) brightness(.7);
        opacity: 0;
        visibility: hidden;
        transition: opacity .6s ease, visibility 0s linear .6s;
    }

    .offline:not(:popover-open) {
        display: none;
    }

    .offline.is-shown {
        opacity: 1;
        visibility: visible;
        transition: opacity .6s ease, visibility 0s;
    }

    .offline__card {
        display: grid;
        justify-items: center;
        gap: var(--space-4);
        max-width: 360px;
        padding: var(--space-7) var(--space-6) var(--space-6);
        text-align: center;
        transform: translateY(12px);
        transition: transform .6s cubic-bezier(.2, .8, .2, 1);
    }

    .offline.is-shown .offline__card {
        transform: none;
    }

    .offline__icon {
        width: 48px;
        height: 48px;
        filter: grayscale(1);
        animation: offline-pulse 2.4s ease-in-out infinite;
    }

    .offline__text {
        color: var(--stone-100);
        line-height: 1.5;
    }

    .offline__retry {
        min-height: 1em;
        color: var(--stone-200);
    }

    @keyframes offline-pulse {
        50% {
            opacity: .45;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .offline,
        .offline.is-shown,
        .offline__card {
            transition: none;
        }

        .offline__icon {
            animation: none;
        }
    }

    .search {
        --dialog-w: 560px;
        max-height: min(520px, var(--view-h) - 2 * var(--gap));
        margin: 12vh auto auto;
    }

    .search__field {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--space-5);
        padding: 0 var(--space-5);
        background: var(--stone-900);
        border-bottom: var(--divider);
        box-shadow: var(--well);
        color: var(--stone-200);
    }

    .search__field:focus-within {
        color: var(--white);
    }

    .search__glass {
        flex: none;
        width: 16px;
        height: 16px;
        margin-inline: var(--space-2);
    }

    .search__input {
        flex: 1;
        min-width: 0;
        min-height: 52px;
        padding: 0;
        background: none;
        border: 0;
        color: var(--white);
        font: 600 var(--text-xl) var(--font-body);
        outline: none;
    }

    .search__input::placeholder {
        color: var(--stone-500);
    }

    .search__results {
        padding: var(--space-2) var(--space-3) var(--space-3);
        overflow-y: auto;
    }

    .search__results:empty {
        display: none;
    }

    .search__group {
        padding: var(--space-4) var(--space-3) var(--space-3);
    }

    .search__result {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        min-height: var(--row);
        padding: var(--space-2) var(--space-3);
        cursor: pointer;
    }

    .search__result[aria-selected="true"] {
        background: var(--accent);
        box-shadow: inset 0 -3px var(--accent-lo), inset 2px 2px rgb(255 255 255 / .15);
    }

    .search__result img {
        flex: none;
        width: 24px;
        height: 24px;
        border: var(--edge);
        image-rendering: pixelated;
    }

    .search__result .tag {
        margin-left: auto;
    }

    .search__match {
        background: none;
        color: var(--accent-hi);
    }

    .search__result[aria-selected="true"] .search__match {
        color: var(--white);
        text-decoration: underline 2px;
        text-underline-offset: 3px;
    }

    .search__result[aria-selected="true"] .tag {
        background: var(--accent-lo);
        color: var(--white);
    }

    .search__result[aria-selected="true"] .row__meta {
        color: rgb(255 255 255 / .8);
    }

    .search__hints {
        flex: none;
        padding: var(--space-3) var(--space-5);
        background: var(--stone-800);
        border-top: var(--divider);
    }

    .editor__preview {
        display: grid;
        flex: none;
        place-items: center;
        width: var(--row);
        height: var(--row);
        background: var(--stone-900);
        box-shadow: var(--well);
        color: var(--waypoint);
    }

    .editor__preview--region::before {
        content: "";
        width: 22px;
        height: 22px;
        background: color-mix(in srgb, var(--waypoint) 35%, transparent);
        border: 2px solid var(--waypoint);
    }

    .editor__preview svg {
        shape-rendering: crispEdges;
    }

    .editor__preview--region svg {
        filter: drop-shadow(0 2px 0 rgb(0 0 0 / .45));
    }

    .position-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        min-height: var(--control);
        padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
        background: var(--stone-900);
        border: var(--field-edge);
        box-shadow: var(--well);
    }

    .position-field .btn {
        flex: none;
    }

    .color-picker {
        display: contents;
    }

    .swatches {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: var(--space-2);
    }

    .swatch {
        position: relative;
        aspect-ratio: 1;
        background: var(--swatch);
        border: var(--edge);
        box-shadow: inset 2px 2px rgb(255 255 255 / .25), inset -2px -2px rgb(0 0 0 / .25);
        cursor: pointer;
    }

    .swatch input {
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .swatch:hover {
        translate: 0 -2px;
    }

    .swatch:has(input:checked) {
        outline: 2px solid var(--white);
        outline-offset: 1px;
    }

    .swatch:has(input:focus-visible) {
        outline: 2px dashed var(--white);
        outline-offset: 1px;
    }

    .picker {
        position: relative;
        height: 120px;
        background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue));
        border: var(--edge);
        cursor: crosshair;
        touch-action: none;
    }

    .picker:focus-visible {
        outline-offset: 1px;
    }

    .picker__thumb {
        position: absolute;
        width: 12px;
        height: 12px;
        translate: -50% -50%;
        background: var(--waypoint);
        border: 2px solid var(--white);
        box-shadow: 0 0 0 2px var(--stone-900);
        pointer-events: none;
    }

    .hue {
        appearance: none;
        width: 100%;
        height: 16px;
        margin: 0;
        background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
        border: var(--edge);
        cursor: pointer;
    }

    .hue::-webkit-slider-thumb {
        appearance: none;
        width: 8px;
        height: 20px;
        background: var(--white);
        border: 2px solid var(--stone-900);
    }

    .hue::-moz-range-thumb {
        width: 4px;
        height: 16px;
        background: var(--white);
        border: 2px solid var(--stone-900);
        border-radius: 0;
    }

    .hue:focus-visible {
        outline-offset: 1px;
    }

    .hex {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        font-family: var(--font-mono);
    }

    .hex span {
        color: var(--stone-200);
    }

    .hex input {
        flex: 1;
        min-width: 0;
        padding: 0;
        background: none;
        border: 0;
        outline: none;
        text-transform: lowercase;
    }

    .hex::after {
        content: "";
        width: 18px;
        height: 18px;
        background: var(--waypoint);
        border: var(--edge);
    }

    .manager__all {
        flex: none;
        align-items: center;
        padding: var(--space-4) var(--space-5) 0 var(--space-6);
        color: var(--stone-200);
    }

    .manager__all .check__title {
        font-size: var(--text-s);
    }

    .manager__row {
        grid-template-columns: auto auto minmax(0, 1fr) auto auto;
        min-height: 48px;
        padding-right: var(--space-2);
    }

    .manager__row--region {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .manager__row.is-hidden :is(.marker-icon, .manager__text) {
        opacity: .45;
    }

    .manager__text {
        padding: 0;
        background: none;
        border: 0;
        text-align: left;
        cursor: pointer;
    }

    .manager__text:is(:hover, :focus-visible) .row__name {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .manager__part + .manager__part {
        margin-left: 1.5ch;
    }

    .manager__distance {
        color: var(--stone-100);
        font-weight: 600;
        text-align: right;
        white-space: nowrap;
    }

    .manager__actions {
        display: flex;
    }

    .manager__import {
        flex: none;
        margin: 0 var(--space-5) var(--space-5);
        font-size: var(--text-m);
    }

    .manager__buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-3);
    }

    @media (max-width: 560px) {
        .manager__row {
            grid-template-columns: auto auto minmax(0, 1fr) auto;
        }

        .manager__actions {
            grid-column: 3 / -1;
            justify-content: flex-end;
        }

        .manager__row--region {
            grid-template-columns: auto minmax(0, 1fr) auto;
        }

        .manager__row--region .manager__actions {
            grid-column: auto;
        }
    }

    .icon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: var(--space-2);
        max-height: min(60vh, 420px);
        padding: var(--space-1);
        overflow-y: auto;
    }

    .icon-tile {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        background: var(--stone-900);
        box-shadow: var(--well);
        color: var(--waypoint, var(--stone-200));
        cursor: pointer;
    }

    .icon-tile input {
        position: absolute;
        inset: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .icon-tile .icon-image {
        width: 32px;
        height: 32px;
    }

    .icon-tile:hover {
        background: var(--stone-700);
    }

    .icon-tile:has(input:focus-visible) {
        background: var(--stone-700);
    }

    .icon-tile:has(input:checked) {
        background: var(--stone-600);
        outline: 2px solid var(--white);
        outline-offset: 1px;
    }

    .icon-choice {
        display: grid;
        flex: none;
        place-items: center;
        width: var(--control-s);
        height: var(--control-s);
        padding: 0;
        background: var(--stone-900);
        border: var(--field-edge);
        box-shadow: var(--well);
        color: var(--stone-200);
        cursor: pointer;
    }

    .icon-editor {
        display: flex;
        gap: var(--space-4);
        align-items: flex-start;
    }

    .icon-editor__grid {
        display: grid;
        flex: none;
        grid-template-columns: repeat(8, 24px);
        gap: 1px;
        padding: 1px;
        background: var(--stone-700);
        border: var(--field-edge);
        box-shadow: var(--well);
        touch-action: none;
    }

    .icon-editor__cell {
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        cursor: crosshair;
    }

    .icon-editor__cell.is-empty {
        background: repeating-conic-gradient(var(--stone-800) 0 25%, var(--stone-900) 0 50%) 0 0 / 12px 12px;
    }

    .icon-editor__cell:focus-visible {
        outline-offset: -2px;
    }

    .icon-editor__side {
        display: grid;
        container-type: inline-size;
        flex: 1;
        gap: var(--space-3);
        min-width: 0;
    }

    .icon-editor__tools,
    .icon-editor__history {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .icon-editor__tools {
        justify-content: space-between;
    }

    .icon-editor__previews {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .icon-editor__preview .waypoint__badge {
        width: 36px;
        height: 45px;
    }

    @container (max-width: 123px) {
        .icon-editor__preview .waypoint__badge {
            width: 24px;
            height: 30px;
        }
    }

    .icon-field {
        display: flex;
        gap: var(--space-3);
        align-items: center;
        width: 100%;
        text-align: left;
        cursor: pointer;
    }

    .icon-field__image {
        display: grid;
        flex: none;
    }

    .icon-field > :last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .icon-field .icon-image {
        width: 24px;
        height: 24px;
    }

    .icon-field.is-default {
        color: var(--stone-200);
    }

    .icon-field.is-default .icon-image {
        opacity: .5;
    }

    .icon-choice:hover {
        border-color: var(--stone-200);
    }

    .icon-choice.is-default .icon-image {
        opacity: .5;
    }

    .settings__row.settings__layer {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
        gap: var(--space-3);
    }

    .settings__layer .icon-choice,
    .settings__layer .settings__scale-button {
        order: 1;
    }

    .settings__scale-button {
        height: var(--control-s);
        padding: 0 var(--space-3);
        background: var(--stone-900);
        border: var(--field-edge);
        box-shadow: var(--well);
        color: var(--stone-100);
        font-size: var(--text-s);
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        transition: var(--hover);
    }

    .settings__scale-button:hover,
    .settings__scale-button[aria-expanded="true"] {
        border-color: var(--stone-200);
    }

    .settings__scale-button[aria-expanded="true"] {
        color: var(--white);
    }

    .settings__scale {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        row-gap: var(--space-3);
    }

    .settings__scale-head {
        display: grid;
        grid-column: 1 / -1;
        gap: var(--space-3);
    }

    .settings__scale-label {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        color: var(--stone-200);
        font-size: var(--text-s);
    }

    .settings__scale-track {
        display: grid;
        gap: var(--space-2);
    }

    .settings__slider {
        --thumb: 10px;
        appearance: none;
        width: 100%;
        height: 14px;
        margin: 0;
        background:
            repeating-linear-gradient(to right, rgb(255 255 255 / .18) 0 2px, transparent 2px calc((100% - 2px) / var(--steps, 1))) calc(var(--thumb) / 2 - 1px) 50% / calc(100% - var(--thumb) + 2px) 4px no-repeat,
            linear-gradient(var(--accent)) right / calc(100% - var(--thumb) / 2 - var(--at, 0) * (100% - var(--thumb))) 100% no-repeat,
            var(--stone-900);
        border: var(--edge);
        box-shadow: var(--well);
        cursor: pointer;
    }

    .settings__slider::-webkit-slider-thumb {
        appearance: none;
        width: var(--thumb);
        height: 22px;
        background: var(--white);
        border: 2px solid var(--stone-900);
        box-shadow: inset 0 -3px var(--stone-lip);
    }

    .settings__slider::-moz-range-thumb {
        width: 6px;
        height: 18px;
        background: var(--white);
        border: 2px solid var(--stone-900);
        border-radius: 0;
        box-shadow: inset 0 -3px var(--stone-lip);
    }

    .settings__slider:focus-visible {
        outline-offset: 1px;
    }

    .settings__scale-ends {
        display: flex;
        justify-content: space-between;
        color: var(--stone-200);
        font-size: var(--text-xs);
    }

    .settings__scale-value {
        color: var(--white);
        font-size: var(--text-m);
        font-weight: 700;
        white-space: nowrap;
    }

    .dialog.is-peeking {
        visibility: hidden;
    }

    .dialog.is-peeking::backdrop {
        background: transparent;
        backdrop-filter: none;
    }

    .dialog.is-peeking .settings__scale {
        background: none;
        box-shadow: none;
    }

    .dialog.is-peeking .settings__scale-head {
        visibility: visible;
        background: var(--glass);
        box-shadow: 0 0 0 var(--space-4) var(--glass), 0 8px 24px var(--space-4) rgb(0 0 0 / .5);
    }

    .settings__layer .switch {
        order: 2;
    }

    .icons__hint {
        flex: none;
        padding: var(--space-3) var(--space-5) 0;
    }

    .icons__row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .icons__preview {
        display: grid;
        flex: none;
        place-items: center;
        width: 40px;
        height: 40px;
        background: var(--stone-900);
        box-shadow: var(--well);
    }

    .icons__preview .icon-image {
        width: 32px;
        height: 32px;
    }

    .icons__name {
        width: 100%;
    }

    .settings__editors {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
        margin-left: auto;
        overflow: hidden;
    }

    .settings__editors:not([hidden]) + .icon-btn {
        margin-left: 0;
    }

    .settings__editor {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--space-2);
        height: 28px;
        padding: 0 var(--space-3) 0 var(--space-2);
        background: var(--stone-800);
        border: var(--edge);
        font-size: var(--text-s);
        font-weight: 700;
    }

    .settings__editor-head {
        width: 16px;
        height: 16px;
        box-shadow: 0 0 0 2px var(--green);
        image-rendering: pixelated;
    }

    .settings__editor[data-client="mod"] .settings__editor-head {
        box-shadow: 0 0 0 2px var(--accent-hi);
    }

    .settings__layout {
        display: grid;
        flex: 1;
        grid-template-columns: 200px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
    }

    .settings__nav {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        padding: var(--space-4) var(--space-3);
        overflow-y: auto;
        background: var(--stone-800);
        border-right: var(--divider);
    }

    .settings__nav::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: var(--slide-w, 0);
        height: var(--slide-h, 0);
        background: var(--accent-lo);
        box-shadow: inset 4px 0 var(--accent-hi);
        translate: var(--slide-x, 0) var(--slide-y, 0);
        pointer-events: none;
    }

    .settings__nav.is-sliding::before {
        transition: translate .32s var(--ease-spring), width .32s var(--ease-spring), height .32s var(--ease-spring);
    }

    .settings__link {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: var(--control);
        padding: 0 var(--space-4);
        background: none;
        border: 0;
        color: var(--stone-200);
        font-size: var(--text-l);
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    .settings__link:is(:hover, :focus-visible):not([aria-current="true"]) {
        background: var(--stone-700);
        color: var(--white);
        outline: none;
    }

    .settings__link[aria-current="true"] {
        color: var(--white);
    }

    .settings__body {
        padding: 0 var(--space-6) var(--space-6);
        scroll-padding-top: var(--space-4);
    }

    .settings__section {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-5) 0 var(--space-3);
    }

    .settings__section + .settings__section {
        border-top: 2px solid var(--stone-800);
    }

    .settings__section-header {
        display: grid;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .settings__heading {
        color: var(--accent-hi);
    }

    .settings__intro {
        max-width: 60ch;
        color: var(--stone-200);
        font-size: var(--text-m);
        line-height: 1.45;
    }

    .settings__subheading {
        margin: var(--space-4) 0 var(--space-1);
        color: var(--stone-100);
        font-size: var(--text-m);
        font-weight: 800;
    }

    .settings__row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-5);
        min-height: 60px;
        padding: var(--space-3) var(--space-4);
        box-shadow: inset 0 2px rgb(255 255 255 / .03);
    }

    .settings__row--sub {
        width: auto;
        min-height: 52px;
        margin-left: var(--space-6);
        box-shadow: inset 2px 0 var(--stone-600);
    }

    .settings__row:is(.is-inactive, .is-locked) {
        cursor: default;
    }

    .settings__row:is(.is-inactive, .is-locked):hover {
        background: var(--stone-800);
    }

    .settings__row.is-inactive .row__text {
        opacity: .45;
    }

    .settings__row.is-locked {
        background: rgb(38 38 39 / .55);
    }

    .settings__label {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        font-weight: 700;
    }

    .settings__row.is-locked .settings__label::after {
        content: "";
        width: 10px;
        height: 12px;
        background: var(--stone-200);
        mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6' shape-rendering='crispEdges'><path d='M1 0h3v1H1zM0 1h1v2H0zM4 1h1v2H4zM0 3h5v1H0zM0 4h2v1H0zM3 4h2v1H3zM0 5h5v1H0z'/></svg>") center / 10px 12px no-repeat;
    }

    .settings__input {
        width: 140px;
    }

    .settings__input--wide {
        width: min(300px, 40vw);
    }

    .settings__value {
        max-width: min(300px, 40vw);
        padding: var(--space-2) var(--space-3);
        overflow: hidden;
        background: var(--stone-900);
        color: var(--stone-100);
        font: 600 var(--text-m) var(--font-mono);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .settings__value.is-empty {
        color: var(--stone-200);
        font: italic 600 var(--text-m) var(--font-body);
    }

    .settings__number {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    .settings__number .settings__input {
        width: 110px;
        font-family: var(--font-mono);
        text-align: right;
    }

    .settings__unit {
        width: 64px;
        color: var(--stone-200);
        font-size: var(--text-s);
        font-weight: 600;
    }

    .settings__worlds {
        display: grid;
        gap: var(--space-2);
    }

    .settings__world {
        --env: var(--stone-500);
        grid-template-columns: 28px minmax(0, 1fr) auto;
        gap: var(--space-3) var(--space-4);
        padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
        box-shadow: inset 4px 0 var(--env), inset 0 2px rgb(255 255 255 / .03);
    }

    .settings__world[data-env="NORMAL"] {
        --env: var(--green);
    }

    .settings__world[data-env="NETHER"] {
        --env: var(--red);
    }

    .settings__world[data-env="THE_END"] {
        --env: var(--purple);
    }

    .settings__world.is-off {
        background: rgb(38 38 39 / .55);
    }

    .settings__world.is-off :is(.settings__world-name, .settings__rank) {
        opacity: .55;
    }

    .settings__rank {
        grid-row: 1 / 3;
        color: var(--stone-200);
        font: 600 var(--text-l)/1 var(--font-mono);
        text-align: center;
    }

    .settings__world-name {
        display: grid;
        gap: var(--space-2);
        min-width: 0;
    }

    .settings__world-input {
        width: 100%;
        font-size: var(--text-xl);
        font-weight: 700;
    }

    .settings__world-input::placeholder {
        color: var(--stone-200);
    }

    .settings__world-id {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-3);
        color: var(--stone-200);
        font-size: var(--text-s);
    }

    .settings__env {
        color: var(--env);
        font-weight: 700;
    }

    .settings__flags {
        display: flex;
        flex-wrap: wrap;
        grid-column: 2;
        grid-row: 2;
        gap: var(--space-3) var(--space-6);
    }

    .settings__flag {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        color: var(--stone-200);
        font-size: var(--text-m);
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
    }

    .settings__flag:hover,
    .settings__flag:has(.switch__input:checked) {
        color: var(--white);
    }

    .settings__flag-text {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .settings__moves {
        display: grid;
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }

    .settings__moves .icon-btn {
        height: 24px;
    }

    .settings__row.settings__limit {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .settings__limit .row__text .hint {
        font-family: var(--font-mono);
    }

    .settings__limit-line {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .settings__limit-line .field {
        gap: var(--space-2);
    }

    .settings__limit-line .input {
        width: 112px;
        font-family: var(--font-mono);
    }

    .settings__limit-line .settings__shape {
        width: 160px;
        font-family: var(--font-body);
    }

    .settings__views .row__text code.hint {
        font-family: var(--font-mono);
    }

    .settings__views .settings__effect {
        color: var(--accent-hi);
    }

    .settings__segmented {
        width: 330px;
    }

    .settings__row.is-changed,
    .settings__world.is-changed {
        box-shadow: inset 4px 0 var(--accent-hi), inset 0 2px rgb(255 255 255 / .03);
    }

    .settings__world.is-changed {
        box-shadow: inset 4px 0 var(--env), inset 8px 0 var(--accent-hi), inset 0 2px rgb(255 255 255 / .03);
    }

    .settings__row.is-conflict,
    .settings__world.is-conflict {
        outline: 2px solid var(--gold);
        outline-offset: -2px;
    }

    .settings__row.is-updated,
    .settings__world.is-updated {
        animation: settings-updated 1.8s ease-out;
    }

    @keyframes settings-updated {
        0%, 30% {
            background: var(--accent-lo);
        }
    }

    .settings__world .callout {
        grid-column: 1 / -1;
    }

    .settings__conflict-line {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3) var(--space-5);
    }

    .settings__conflict-text {
        min-width: 0;
        color: var(--stone-100);
        font-size: var(--text-m);
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .settings__conflict-buttons {
        display: flex;
        gap: var(--space-2);
    }

    @media (prefers-reduced-motion: reduce) {
        .settings__row.is-updated,
        .settings__world.is-updated {
            animation: none;
            outline: 2px solid var(--accent-hi);
            outline-offset: -2px;
        }
    }

    @media (max-width: 720px) {
        .settings__row.settings__views {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-3);
        }

        .settings__segmented {
            width: auto;
        }

        .topbar {
            gap: var(--space-4);
        }

        .brand {
            font-size: 0;
        }

        .server-name {
            max-width: 12ch;
            padding-left: var(--space-4);
        }

        .world-tab {
            min-width: 0;
            padding: 0 var(--space-4);
        }

        .world-menu {
            left: var(--gap);
            right: var(--gap);
            width: auto;
        }

        .search-button__text,
        .search-button__key,
        #status-text,
        #status-retry {
            display: none;
        }

        .search-button {
            width: var(--control-s);
            padding: 0;
        }

        .panel {
            top: auto;
            right: var(--gap);
            width: auto;
            max-height: 50%;
        }

        .panel.is-collapsed {
            transform: translateY(calc(100% + var(--gap)));
        }

        .panel__toggle {
            top: auto;
            bottom: 100%;
            left: 0;
            width: 48px;
            height: 28px;
            border: var(--edge);
            border-bottom: 0;
        }

        .panel__toggle::before {
            rotate: -90deg;
        }

        .panel.is-collapsed .panel__toggle {
            transform: translateY(calc(-1 * var(--gap)));
        }

        .panel.is-collapsed .panel__toggle::before {
            rotate: 90deg;
        }

        .hud {
            top: var(--gap);
            right: auto;
            bottom: auto;
            left: var(--gap);
        }

        .toolbar {
            left: var(--gap);
            right: calc(var(--map-button) + 2 * var(--gap));
            width: auto;
            max-width: none;
            translate: none;
        }

        .selection__actions .btn {
            flex: 1 1 auto;
        }

        .selection__message--keys {
            grid-template-columns: max-content 1fr;
        }

        .search {
            margin-top: var(--gap);
        }

        .search__hints {
            display: none;
        }

        .dialog--l {
            width: 100vw;
            height: var(--view-h);
            max-height: var(--view-h);
            border: 0;
        }

        .settings__layout {
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto minmax(0, 1fr);
        }

        .settings__nav {
            flex-direction: row;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-4);
            overflow-x: auto;
            border-right: 0;
            border-bottom: var(--divider);
            scrollbar-width: none;
        }

        .settings__link {
            flex: none;
            min-height: var(--control-s);
        }

        .settings__nav::before {
            box-shadow: inset 0 -3px var(--accent-hi);
        }

        .settings__body {
            padding: 0 var(--space-4) var(--space-5);
        }

        .settings__row {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-3);
        }

        label.settings__row {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .settings__input--wide {
            width: 100%;
        }

        .settings__world {
            grid-template-columns: 20px minmax(0, 1fr) auto;
        }

        .settings__limit-line {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .settings__limit-line .input,
        .settings__limit-line .settings__shape {
            width: 100%;
        }

        .settings__editor {
            padding: 0 var(--space-2);
        }

        .settings__editor-name {
            display: none;
        }
    }

    @media (max-width: 720px) and (hover: hover) {
        .toolbar {
            top: calc(2 * var(--gap) + var(--control));
        }
    }

    @media (max-width: 400px) {
        .topbar {
            gap: var(--space-3);
        }
    }
}