/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The page kind map: what it reaches beyond the default definitions, whose layer order it falls into. */
@layer elements.button {
    @scope (.button) {
        :scope {
            inline-size: var(--button-width);
            display: var(--button-display, grid);
            place-items: center;
            block-size: var(--control-height);
            padding-inline: 0.625rem;
            background: var(--link);
            border: 0;
            color: oklch(20% 0.05 130);
            font-family: "Press Start 2P", monospace;
            font-size: 0.8125rem;
            line-height: 1;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow:
                inset  2px  2px 0 oklch(88% 0.12 130),
                inset -2px -2px 0 oklch(52% 0.14 130);
        }
        :scope:disabled {
            background: var(--surface-1, oklch(32% 0.01 260));
            color: var(--ink-muted, oklch(62% 0.01 260));
            box-shadow: none;
            cursor: default;
        }
        :scope.with-gold {
            background: var(--gold);
            color: oklch(24% 0.06 85);
            box-shadow:
                inset  2px  2px 0 oklch(90% 0.09 85),
                inset -2px -2px 0 oklch(58% 0.11 85);
        }
        :scope.with-gold:where(:hover, :focus-visible) {
            background: oklch(from var(--gold) calc(l + 0.05) c h);
        }
        :scope.with-red {
            background: var(--danger);
            color: oklch(18% 0.05 28);
            box-shadow:
                inset  2px  2px 0 oklch(82% 0.14 28),
                inset -2px -2px 0 oklch(46% 0.17 28);
        }
        :scope.with-red:where(:hover, :focus-visible) {
            background: oklch(from var(--danger) calc(l + 0.05) c h);
        }
        a:scope { text-decoration: none; }
        :scope:where(:hover, :focus-visible) {
            background: oklch(from var(--link) calc(l + 0.05) c h);
        }
        :scope.with-sign {
            inline-size: var(--button-width, var(--control-height));
            padding-inline: 0;
            font-family: inherit;
            font-size: var(--text-large);
            text-transform: none;
            -webkit-text-stroke: 0.075em currentColor;
        }
    }
}

@layer elements.checkbox {
    @scope (.checkbox) {
        :scope {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--ink);
            cursor: pointer;
            user-select: none;
        }
        input {
            appearance: none;
            margin: 0;
            position: relative;
            inline-size: 2.25rem;
            block-size: 0.5rem;
            background: oklch(18% 0.008 260);
            cursor: pointer;
            box-shadow:
                inset 1.5px 1.5px 0 oklch(9% 0.008 260),
                inset -1.5px -1.5px 0 oklch(30% 0.010 260);
        }
        input::before {
            content: "";
            position: absolute;
            inset-block: -0.3125rem;
            inset-inline-start: 0;
            inline-size: 1.125rem;
            background: oklch(32% 0.010 260);
            box-shadow:
                inset  2px  2px 0 oklch(46% 0.012 260),
                inset -2px -2px 0 oklch(16% 0.008 260);
            transition: translate 90ms steps(3), background 90ms;
        }
        input:checked::before {
            translate: 1.125rem 0;
            background: var(--link);
            box-shadow:
                inset  2px  2px 0 oklch(88% 0.12 130),
                inset -2px -2px 0 oklch(52% 0.14 130);
        }
        @media (prefers-reduced-motion: reduce) {
            input::before { transition: none; }
        }
        input:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: 0.25rem;
        }
        :scope.with-gold input:checked::before {
            background: var(--gold);
            box-shadow:
                inset  2px  2px 0 oklch(from var(--gold) calc(l + 0.12) c h),
                inset -2px -2px 0 oklch(from var(--gold) calc(l - 0.24) c h);
        }
        input:checked ~ span { color: var(--ink-bright); }
        :scope:has(input:disabled) { cursor: default; }
        input:disabled { cursor: default; }
        :scope.with-mark input {
            inline-size: var(--mark, 0.875rem);
            block-size: var(--mark, 0.875rem);
            background: url("/icons/switch-off.webp") center / contain no-repeat;
            box-shadow: none;
            flex: none;
        }
        :scope.with-mark input::before { content: none; }
        :scope.with-mark input:checked {
            background-image: url("/icons/switch-on.webp");
        }
        :scope.with-knob input {
            inline-size: var(--knob, 1.375rem);
            block-size: calc(var(--knob, 1.375rem) * 32 / 46);
            background: var(--knob-picture, url("/icons/group-none.webp")) center / contain no-repeat;
            box-shadow: none;
        }
        :scope.with-knob input::before { content: none; }
        :scope.with-knob input:checked ~ span,
        :scope.with-mark input:checked ~ span { color: var(--ink-bright); }
    }
}

@layer elements.field {
    @scope (.field) {
        :scope {
            display: var(--field-display, grid);
            gap: 0.4375rem;
            min-inline-size: 0;
        }
        .chip {
            --chip-size: 0.625rem;
            --chip-tracking: 0.12em;
            --chip-ink: var(--ink);
        }
        input {
            min-inline-size: 0;
            block-size: var(--control-height);
            padding: 0 0.75rem;
            background: var(--surface-0);
            border: 0;
            color: oklch(90% 0.005 90);
            font-family: ui-monospace, monospace;
            font-size: 0.8125rem;
            letter-spacing: 0.04em;
            box-shadow:
                inset  1.5px  1.5px 0 oklch(9% 0.008 var(--hue-surface)),
                inset -1.5px -1.5px 0 oklch(32% 0.014 var(--hue-surface));
        }
        input::placeholder { color: var(--ink-quiet); }
        :scope:has(input[type="number"]) { grid-template-columns: minmax(0, 1fr); }
        input[type="number"] { appearance: textfield; }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            appearance: none;
            margin: 0;
        }
        input:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: -2px;
        }
    }
}

@layer elements.metric {
    @scope (.metric) {
        :scope {
            padding-inline-start: var(--metric-indent);
            border-inline-start: var(--metric-rule);
            display: var(--metric-display, grid);
            align-content: start;
            gap: var(--space-tight);
        }
        > dd {
            margin: 0;
            font-family: var(--metric-face, ui-monospace, monospace);
            font-size: var(--metric-size, var(--text-large));
            line-height: 1.2;
            color: var(--link);
        }
        > dt {
            font-family: ui-monospace, monospace;
            font-size: var(--text-label);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-quiet);
            overflow-wrap: break-word;
            hyphens: auto;
        }
    }
}

@layer elements.picture {
    @scope (.picture) {
        :scope {
            inline-size: var(--picture-width);
            object-fit: var(--picture-fit);
            display: block;
            max-inline-size: 100%;
            block-size: var(--picture-height, auto);
        }
    }
}

@layer elements.progress {
    @scope (.progress) {
        :scope {
            inline-size: var(--progress-width, 100px);
            block-size: 15px;
            appearance: none;
            border: 1px solid oklch(72% 0.13 85);
            background: oklch(20% 0.02 260 / 0.8);
        }
        :scope::-webkit-progress-bar {
            background: oklch(20% 0.02 260 / 0.8);
        }
        :scope::-webkit-progress-value {
            background: var(--gold, oklch(80% 0.15 85));
        }
        :scope::-moz-progress-bar {
            background: var(--gold, oklch(80% 0.15 85));
        }
    }
}

@layer elements.quick_button {
    @scope (.quick-button) {
        :scope {
            display: grid;
            place-items: center;
            inline-size: var(--quick-size, var(--control-height));
            block-size: var(--quick-block, var(--quick-size, var(--control-height)));
            padding: 0;
            border: 0;
            text-decoration: none;
            line-height: 1;
            cursor: pointer;
            background: oklch(34% 0.012 260);
            color: var(--gold);
            box-shadow:
                inset  2px  2px 0 oklch(52% 0.012 260),
                inset -2px -2px 0 oklch(20% 0.012 260);
        }
        :scope:where(:hover, :focus-visible) {
            background: oklch(39% 0.012 260);
        }
        :scope.with-gold {
            background: var(--gold);
            color: oklch(24% 0.06 85);
            box-shadow:
                inset  2px  2px 0 oklch(90% 0.09 85),
                inset -2px -2px 0 oklch(58% 0.11 85);
        }
        :scope.with-gold:where(:hover, :focus-visible) {
            background: oklch(from var(--gold) calc(l + 0.05) c h);
        }
        :scope:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: 2px;
        }
        :scope > .picture {
            --picture-width: 70%;
            --picture-height: 70%;
            --picture-fit: contain;
        }
        :scope > span {
            font-size: calc(var(--quick-size, var(--control-height)) * 0.55);
        }
        :scope.with-gold > span { color: oklch(24% 0.06 85); }
    }
}

@layer widgets.category_accordion {
    @scope (.category-accordion) {
        :scope {
            container-type: inline-size;
            container-name: category;
        }
        > summary {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            padding-block: var(--space-snug) var(--space-tight);
            border-block-end: 2px solid var(--gold);
            cursor: pointer;
            list-style: none;
            user-select: none;
        }
        > summary::-webkit-details-marker { display: none; }
        > .note {
            margin: var(--space-tight) 0 0;
            font-size: var(--text-micro);
            color: var(--ink-quiet);
        }
        > summary::after {
            content: "";
            inline-size: 0.5rem;
            block-size: 0.5rem;
            margin-inline-end: var(--space-tight);
            border-inline-end: 2px solid var(--gold);
            border-block-end: 2px solid var(--gold);
            transform: translateY(-25%) rotate(45deg);
            transition: transform 90ms steps(3);
        }
        :scope[open] > summary::after { transform: translateY(25%) rotate(225deg); }
        @media (prefers-reduced-motion: reduce) {
            > summary::after { transition: none; }
        }
        > summary:where(:focus-visible) {
            outline: 2px solid var(--gold);
            outline-offset: 0.25rem;
        }
        > .groups {
            display: grid;
            grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
            column-gap: var(--space-snug);
            row-gap: var(--space-tight);
            padding-block: var(--space-snug);
        }
        > .groups > .stack {
            display: grid;
            align-content: start;
            row-gap: var(--space-tight);
        }
        @container category (inline-size < 18rem) {
            > .groups { grid-template-columns: minmax(0, 1fr); }
        }
    }
}

@layer widgets.group_accordion {
    @scope (.group-accordion) {
        :scope { --knob-picture: url("/icons/group-none.webp"); }
        :scope:has(.kinds input:checked) {
            --knob-picture: url("/icons/group-some.webp");
        }
        :scope:not(:has(.kinds input:not(:checked))) {
            --knob-picture: url("/icons/group-all.webp");
        }
        > summary {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            padding-block: var(--space-tight);
            cursor: pointer;
            list-style: none;
            user-select: none;
        }
        > summary::-webkit-details-marker { display: none; }
        > summary::after {
            content: "";
            inline-size: 0.375rem;
            block-size: 0.375rem;
            margin-inline-end: var(--space-tight);
            border-inline-end: 2px solid var(--link);
            border-block-end: 2px solid var(--link);
            transform: translateY(-25%) rotate(45deg);
            transition: transform 90ms steps(3);
        }
        :scope[open] > summary::after { transform: translateY(25%) rotate(225deg); }
        @media (prefers-reduced-motion: reduce) {
            > summary::after { transition: none; }
        }
        > summary:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: 0.25rem;
        }
        > .kinds {
            display: grid;
            row-gap: 0.125rem;
            margin: 0;
            padding-inline-start: var(--space-snug);
            padding-block-end: var(--space-tight);
            list-style: none;
        }
        > .kinds > li {
            position: relative;
            padding-inline-start: var(--space-snug);
        }
        > .kinds > li::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: -0.125rem;
            inset-block-end: 50%;
            inline-size: 0.625rem;
            border-inline-start: 1px solid var(--ink-quiet);
            border-block-end: 1px solid var(--ink-quiet);
        }
        > .kinds > li:not(:last-child)::after {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            inset-block-start: 50%;
            inset-block-end: -0.125rem;
            border-inline-start: 1px solid var(--ink-quiet);
        }
    }
}

@layer widgets.seed_form {
    @scope (.seed-form) {
        :scope {
            padding: 1rem 1.125rem 1.125rem;
            background: oklch(8% 0.008 260 / 0.72);
            display: flex;
            flex-wrap: wrap;
            gap: 0.4375rem 0.625rem;
            align-items: end;
        }
        .field { flex: 1 1 12rem; }
        .button { flex: 1 1 7rem; }
        .button[href] { flex: 0 1 6rem; }
        :scope.with-compact {
            padding: 0;
            background: none;
            flex-wrap: nowrap;
            gap: var(--space-snug);
        }
        :scope.with-compact .button { flex: 0 0 auto; }
    }
}

@layer slices.slice_map {
    :root {
        --map-water-shallow: oklch(56.65% 0.0433 241.61);
        --map-water-deep: oklch(32.71% 0.0385 251.91);
        --map-border: oklch(58.46% 0.0169 260.72);
        --map-deep-sea: oklch(23.48% 0.0249 263.91);
        --map-shallows: oklch(79.3% 0.0746 90.06);
        --map-meadows: oklch(57.71% 0.1111 132.24);
        --map-blackforest: oklch(40.67% 0.0814 140.0);
        --map-swamp: oklch(44.72% 0.0543 63.6);
        --map-plains: oklch(68.87% 0.0908 88.47);
        --map-mistlands: oklch(36.4% 0.0177 303.65);
        --map-mist-wood: oklch(37.84% 0.0697 303.97);
        --map-ashlands: oklch(36.13% 0.0888 29.74);
        --map-mountain: oklch(92.3% 0.0069 247.9);
        --map-deepnorth: oklch(88.82% 0.0584 245.35);
        --map-snow: oklch(92.3% 0.0069 247.9);
        --map-ice: oklch(88.82% 0.0584 245.35);
        --map-ice-rim: oklch(55.08% 0.1144 248.15);
        --map-lava: oklch(65.1% 0.1858 41.99);
        --map-forest: oklch(33.59% 0.0701 143.82);
        --map-hot-sea: oklch(50.05% 0.1716 31.59);
        --map-shadow: oklch(21.42% 0.0148 66.89);
        --map-wave: oklch(34.29% 0.0409 62.78);
    }
}

@layer slices.slice_map {
    @scope (.map) to (.heading > *) {
        :scope {
            grid-template-rows: auto auto minmax(0, 1fr);
            row-gap: var(--space-close);
            padding-block: var(--space-close) 0;
            min-block-size: 0;
        }
        .heading {
            --heading-ink: oklch(99% 0.01 90);
        }
        .map-window {
            display: grid;
            grid-template: minmax(0, 1fr) / minmax(0, 1fr);
            position: relative;
            min-block-size: 0;
            overflow: hidden;
            background: var(--ground);
            cursor: grab;
            touch-action: none;
            overscroll-behavior: contain;
        }
        .map-window:focus-visible {
            outline: 2px solid var(--link);
            outline-offset: -2px;
        }
        .map-tiles,
        .map-markers {
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 0;
            transform-origin: 0 0;
        }
        .map-markers {
            inset: 0;
            transform: none;
            z-index: 2;
            pointer-events: none;
            --scale: 0;
            --origin-x: 0;
            --origin-y: 0;
        }
        .map-marker {
            position: absolute;
            --symbol: 28;
            --growth: 0;
            --field: 0;
            inline-size: calc((var(--symbol) + var(--growth) + var(--field)) * 1px);
            block-size: calc((var(--symbol) + var(--growth) + var(--field)) * 1px);
            margin-block-start: calc((var(--symbol) + var(--growth) + var(--field)) * -0.5px);
            margin-inline-start: calc((var(--symbol) + var(--growth) + var(--field)) * -0.5px);
            --point-x: 0;
            --point-y: 0;
            transform: translate(
                calc((var(--origin-x) + var(--point-x) * var(--scale)) * 1px),
                calc((var(--origin-y) + var(--point-y) * var(--scale)) * 1px)
            );
            z-index: 1;
            pointer-events: auto;
            background-size: contain;
            background-repeat: no-repeat;
            filter: drop-shadow(0 1px 2px oklch(12% 0.01 260 / 0.7));
        }
        .map-markers[data-mode="gl"] .map-marker {
            background-image: none;
        }
        .map-canvas {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            z-index: 2;
            pointer-events: none;
        }
        .map-grip {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            cursor: grabbing;
        }
        .map-grip[data-on] {
            pointer-events: auto;
        }
        .map-markers[data-mode="gl"] .map-marker::before {
            display: none;
        }
        .map-marker-name {
            position: absolute;
            inset-block-end: 100%;
            inset-inline-start: 50%;
            transform: translateX(-50%);
            margin-block-end: 0.2em;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.1;
            white-space: nowrap;
            color: oklch(99% 0 0);
            text-shadow:
                0 1px 2px oklch(12% 0.01 260 / 0.9),
                0 0 3px oklch(12% 0.01 260 / 0.8);
        }
        .map-marker[data-layer="bosses"] {
            background-image: url("/icons/map-boss.webp");
            --symbol: 37;
        }
        .map-marker[data-layer="bosses"] .map-marker-name {
            color: oklch(72% 0.19 25);
        }
        .map-marker[data-layer="bosses"] {
            z-index: 3;
        }
        .map-marker[data-layer="dungeons"],
        .map-marker[data-layer="caves"] {
            background-image: url("/icons/map-dungeon.webp");
            --symbol: 22;
        }
        .map-marker[data-kind="summit"] {
            --symbol: 12;
            background-image: none;
        }
        .map-marker[data-kind="summit"]::before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: oklch(12% 0.01 260);
            clip-path: polygon(50% 0, 100% 100%, 0 100%);
        }
        .map-marker[data-kind="summit"] .map-marker-name {
            inset-block-end: auto;
            inset-block-start: 100%;
            margin-block-end: 0;
            margin-block-start: 0.15em;
            font-size: 0.6875rem;
            font-weight: 600;
        }
        .map-marker[data-kind="tunnel"] {
            background-image: url("/icons/map-tunnel.webp");
            --symbol: 34;
        }
        .map-marker[data-kind="crypt"] {
            background-image: url("/icons/map-crypt.webp");
        }
        .map-marker[data-kind="grave"] {
            background-image: url("/icons/map-grave.webp");
        }
        .map-marker[data-kind="mine"] {
            background-image: url("/icons/map-mine.webp");
        }
        .map-marker[data-layer="dungeons"] .map-marker-name,
        .map-marker[data-layer="caves"] .map-marker-name {
            display: none;
        }
        .map-marker[data-layer="dungeons"]:hover .map-marker-name,
        .map-marker[data-layer="caves"]:hover .map-marker-name {
            display: block;
        }
        .map-marker[data-layer="caves"] {
            background-image: url("/icons/map-cavern.webp");
        }
        .map-marker[data-kind="troll-cave"],
        .map-marker[data-kind="morning-cave"] {
            background-image: url("/icons/map-cave.webp");
        }
        .map-marker[data-layer="traders"] {
            --symbol: 32;
            z-index: 2;
        }
        .map-marker[data-kind="quest"] {
            background-image: url("/icons/map-quest.webp");
        }
        .map-marker[data-kind="dyrnwyn"] {
            background-image: url("/icons/map-dyrnwyn.webp");
        }
        .map-marker[data-kind="haldor"] {
            background-image: url("/icons/map-haldor.webp");
        }
        .map-marker[data-kind="hildir"] {
            background-image: url("/icons/map-hildir.webp");
        }
        .map-marker[data-kind="witch"] {
            background-image: url("/icons/map-witch.webp");
        }
        .map-marker[data-layer="traders"] .map-marker-name {
            display: none;
        }
        .map-marker[data-layer="traders"]:hover .map-marker-name {
            display: block;
        }
        .map-options > .heading {
            --heading-size: var(--text-large);
            --heading-pad: var(--space-tight) var(--space-snug);
            --heading-shadow: 1px 1px 0 oklch(0% 0 0 / 0.9), -1px 1px 0 oklch(0% 0 0 / 0.9);
        }
        .map-options .categories {
            min-block-size: 0;
            overflow-block: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--gold) transparent;
            padding-inline-end: var(--space-tight);
        }
        .map-options .options-note {
            margin: 0 0 var(--space-tight);
            font-size: var(--text-micro);
            text-align: start;
            color: var(--ink-quiet);
        }
        :scope[data-orbit] .map-options .options-note {
            color: var(--gold);
        }
        .map-marker[data-layer="treasures"] {
            --symbol: 15;
        }
        .map-marker[data-kind="frost-ship"] {
            background-image: url("/icons/map-frost-ship.webp");
            --symbol: 34;
        }
        .map-marker[data-kind="wreck"] {
            background-image: url("/icons/map-wreck.webp");
        }
        .map-marker[data-kind="well"] {
            background-image: url("/icons/map-well.webp");
        }
        .map-marker[data-kind="runestone"] {
            background-image: url("/icons/map-runestone.webp");
        }
        .map-marker[data-kind="stone-clearing"] {
            background-image: url("/icons/map-stone-clearing.webp");
            --symbol: 22;
        }
        .map-marker[data-kind="chest"] {
            background-image: url("/icons/map-chest.webp");
        }
        .map-marker[data-kind="axe-chest"] {
            background-image: url("/icons/map-axe-chest.webp");
            --symbol: 26;
        }
        .map-marker[data-layer="treasures"] .map-marker-name {
            display: none;
        }
        .map-marker[data-layer="treasures"]:hover .map-marker-name {
            display: block;
        }
        .map-marker[data-layer="spawns"] {
            --symbol: 15;
        }
        .map-marker[data-kind="ice-pond"] {
            background-image: url("/icons/map-ice-pond.webp");
            --symbol: 28;
        }
        .map-marker[data-kind="monument"] {
            background-image: url("/icons/map-monument.webp");
        }
        .map-marker[data-kind="greydwarf"] {
            background-image: url("/icons/map-greydwarf.webp");
        }
        .map-marker[data-kind="nest"] {
            background-image: url("/icons/map-nest.webp");
        }
        .map-marker[data-kind="vulture-nest"] {
            background-image: url("/icons/map-vulture-nest.webp");
        }
        .map-marker[data-kind="draugr"] {
            background-image: url("/icons/map-draugr.webp");
            --symbol: 16;
        }
        .map-marker[data-layer="spawns"] .map-marker-name {
            display: none;
        }
        .map-marker[data-layer="spawns"]:hover .map-marker-name {
            display: block;
        }
        .map-marker[data-layer="resources"] {
            --symbol: 15;
        }
        .map-marker[data-kind="frost-troll"] {
            background-image: url("/icons/map-frost-troll.webp");
            --symbol: 36;
        }
        .map-marker[data-kind="tar"] {
            background-image: url("/icons/map-tar.webp");
        }
        .map-marker[data-kind="flametal"] {
            background-image: url("/icons/map-flametal.webp");
        }
        .map-marker[data-kind="skeleton"] {
            background-image: url("/icons/map-skeleton.webp");
        }
        .map-marker[data-kind="sword"] {
            background-image: url("/icons/map-sword.webp");
        }
        .map-marker[data-kind="surtling"] {
            background-image: url("/icons/map-surtling.webp");
        }
        .map-marker[data-kind="bees"] {
            background-image: url("/icons/map-bee.webp");
        }
        .map-marker[data-kind="copper"],
        .map-marker[data-kind="tin"],
        .map-marker[data-kind="silver"],
        .map-marker[data-kind="scrap-iron"],
        .map-marker[data-kind="armour"] {
            filter: none;
        }
        .map-marker[data-kind="copper"],
        .map-marker[data-kind="tin"],
        .map-marker[data-kind="scrap-iron"],
        .map-marker[data-kind="silver"],
        .map-marker[data-kind="sulfur"] {
            --symbol: 10;
        }
        .map-marker[data-kind="blueberry"],
        .map-marker[data-kind="raspberry"],
        .map-marker[data-kind="cloudberry"],
        .map-marker[data-kind="wine"] {
            --symbol: 18;
        }
        .map-marker[data-kind="armour"],
        .map-marker[data-kind="sword"] {
            --symbol: 25;
        }
        .map-marker[data-kind="lingonberry"] {
            --symbol: 12;
        }
        .map-marker[data-kind="guck"] {
            background-image: url("/icons/map-guck.webp");
        }
        .map-marker[data-kind="copper"] {
            background-image: url("/icons/map-copper.webp");
        }
        .map-marker[data-kind="tin"] {
            background-image: url("/icons/map-tin.webp");
        }
        .map-marker[data-kind="silver"] {
            background-image: url("/icons/map-silver.webp");
        }
        .map-marker[data-kind="scrap-iron"] {
            background-image: url("/icons/map-scrap-iron.webp");
        }
        .map-marker[data-kind="blueberry"] {
            background-image: url("/icons/map-blueberry.webp");
        }
        .map-marker[data-kind="raspberry"] {
            background-image: url("/icons/map-raspberry.webp");
        }
        .map-marker[data-kind="cloudberry"] {
            background-image: url("/icons/map-cloudberry.webp");
        }
        .map-marker[data-kind="lingonberry"] {
            background-image: url("/icons/map-lingonberry.webp");
        }
        .map-marker[data-kind="mushroom"] {
            background-image: url("/icons/map-mushroom.webp");
            --symbol: 14;
        }
        .map-marker[data-kind="wine"] {
            background-image: url("/icons/map-wine.webp");
        }
        .map-marker[data-kind="sulfur"] {
            background-image: url("/icons/map-sulfur.webp");
        }
        .map-marker[data-kind="cliff"] {
            background-image: url("/icons/map-cliff.webp");
            --symbol: 14;
        }
        .map-marker[data-kind="fern"] {
            background-image: url("/icons/map-fern.webp");
            --symbol: 20;
        }
        .map-marker[data-kind="deer"] {
            background-image: url("/icons/map-deer.webp");
            --symbol: 24;
        }
        .map-marker[data-kind="boar"] {
            background-image: url("/icons/map-boar.webp");
            --symbol: 20;
        }
        .map-marker[data-kind="neck"] {
            background-image: url("/icons/map-neck.webp");
            --symbol: 20;
        }
        .map-fields {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            z-index: 10;
            pointer-events: none;
            overflow: visible;
        }
        .map-fields[hidden],
        .map-fields path[hidden] {
            display: none;
        }
        .map-fields path {
            --field: oklch(70% 0.05 250);
            fill-rule: evenodd;
            fill: color-mix(in oklch, var(--field) 28%, transparent);
            stroke: var(--field);
            stroke-width: 1.5;
            stroke-dasharray: 5 3;
            vector-effect: non-scaling-stroke;
            pointer-events: visiblePainted;
        }
        .map-fields path[data-shown] {
            fill: color-mix(in oklch, var(--field) 55%, transparent);
            stroke-dasharray: none;
        }
        .map-fields[data-level="1"] path[data-single] {
            display: none;
        }
        .map-window[data-markers="waiting"] :is(.map-markers, .map-canvas, .map-fields) {
            opacity: 0;
        }
        :is(.map-markers, .map-canvas, .map-fields) {
            transition: opacity 300ms ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            :is(.map-markers, .map-canvas, .map-fields) { transition: none; }
        }
        .map-marker[data-field] {
            --field: 8;
        }
        .map-marker[data-field]:not([data-area]) {
            background-image: none;
        }
        .map-marker[data-field][data-area] {
            --field: 0;
        }
        .map-marker[data-field][data-shown] .map-marker-name {
            display: block;
        }
        .map-marker[data-quiet] {
            pointer-events: none;
        }
        .map-fields path[data-kind="surtling"] {
            --field: oklch(67% 0.266 317);
        }
        .map-fields path[data-kind="cliff"] {
            --field: oklch(21% 0.008 276);
        }
        .map-fields path[data-kind="tin"] {
            --field: oklch(83% 0.022 264);
        }
        .map-fields path[data-kind="copper"] {
            --field: oklch(49% 0.081 46);
        }
        .map-fields path[data-kind="scrap-iron"] {
            --field: oklch(36% 0.005 106);
        }
        .map-fields path[data-kind="silver"] {
            --field: oklch(69% 0.115 248);
        }
        .map-fields path[data-kind="flametal"] {
            --field: oklch(42% 0.086 25);
        }
        .map-fields path[data-kind="leviathan"] {
            --field: oklch(42% 0.007 49);
        }
        .map-fields path[data-kind="guck"] {
            --field: oklch(49% 0.160 142);
        }
        .map-fields path[data-kind="tar"] {
            --field: oklch(37% 0.005 301);
        }
        .map-fields path[data-kind="sulfur"] {
            --field: oklch(56% 0.109 86);
        }
        .map-fields path[data-kind="armour"] {
            --field: oklch(50% 0.077 66);
        }
        .map-fields path[data-kind="skeleton"] {
            --field: oklch(22% 0.004 264);
        }
        .map-fields path[data-kind="frost-troll"] {
            --field: oklch(40% 0.070 254);
        }
        .map-fields path[data-kind="sword"] {
            --field: oklch(50% 0.077 66);
        }
        .map-fields path[data-kind="blueberry"] {
            --field: oklch(37% 0.058 266);
        }
        .map-fields path[data-kind="raspberry"] {
            --field: oklch(43% 0.144 25);
        }
        .map-fields path[data-kind="cloudberry"] {
            --field: oklch(73% 0.144 77);
        }
        .map-fields path[data-kind="lingonberry"] {
            --field: oklch(34% 0.131 24);
        }
        .map-fields path[data-kind="mushroom"] {
            --field: oklch(46% 0.175 28);
        }
        .map-fields path[data-kind="wine"] {
            --field: oklch(72% 0.121 116);
        }
        .map-fields path[data-kind="fern"] {
            --field: oklch(48% 0.080 111);
        }
        .map-fields path[data-kind="deer"] {
            --field: oklch(43% 0.071 57);
        }
        .map-fields path[data-kind="boar"] {
            --field: oklch(50% 0.047 63);
        }
        .map-fields path[data-kind="neck"] {
            --field: oklch(46% 0.059 127);
        }
        .map-fields path[data-kind="bees"] {
            --field: oklch(65% 0.130 84);
        }
        .map-fields path[data-kind="deer"] {
            --field: oklch(64% 0.13 55);
        }
        .map-fields path[data-kind="boar"] {
            --field: oklch(86% 0.005 250);
        }
        .map-fields path[data-kind="neck"] {
            --field: oklch(66% 0.10 160);
        }
        .map-fields path[data-kind="cloudberry"] {
            --field: oklch(90% 0.13 98);
        }
        .map-fields path[data-kind="blueberry"] {
            --field: oklch(72% 0.14 255);
        }
        .map-fields path[data-kind="raspberry"] {
            --field: oklch(78% 0.12 350);
        }
        .map-fields path[data-kind="wine"] {
            --field: oklch(86% 0.17 125);
        }
        .map-fields path[data-kind="fern"] {
            --field: oklch(80% 0.10 305);
        }
        .map-fields path[data-kind="scrap-iron"] {
            --field: oklch(84% 0.005 250);
        }
        .map-fields path[data-kind="flametal"] {
            --field: oklch(80% 0.06 240);
        }
        .map-fields path[data-kind="skeleton"] {
            --field: oklch(90% 0.004 250);
        }
        .map-fields path[data-kind="armour"],
        .map-fields path[data-kind="sword"] {
            --field: oklch(68% 0.09 185);
        }
        .map-fields path[data-kind="sulfur"] {
            --field: oklch(88% 0.17 105);
        }
        .map-marker[data-kind="armour"] {
            background-image: url("/icons/map-helmet.webp");
        }
        .map-marker[data-kind="leviathan"] {
            background-image: url("/icons/map-leviathan.webp");
            --symbol: 22;
        }
        .map-marker[data-layer="resources"] .map-marker-name {
            display: none;
        }
        .map-marker[data-layer="resources"]:hover .map-marker-name {
            display: block;
        }
        .map-marker[data-layer="settlements"] {
            --symbol: 15;
        }
        .map-marker[data-kind="morkhalla"] {
            background-image: url("/icons/map-morkhalla.webp");
            --symbol: 28;
        }
        .map-marker[data-kind="wood-camp"] {
            background-image: url("/icons/map-wood-camp.webp");
            --symbol: 25;
        }
        .map-marker[data-kind="maypole"] {
            background-image: url("/icons/map-maypole.webp");
            --symbol: 26;
        }
        .map-marker[data-kind="maypole"] .map-marker-name {
            display: none;
        }
        .map-marker[data-kind="maypole"]:hover .map-marker-name {
            display: block;
        }
        .map-marker[data-kind="village"] {
            background-image: url("/icons/map-village.webp");
            --symbol: 33;
        }
        .map-marker[data-kind="north-village"] {
            background-image: url("/icons/map-north-village.webp");
            --symbol: 22;
        }
        .map-marker[data-kind="infested"] {
            background-image: url("/icons/map-infested.webp");
            --symbol: 33;
        }
        .map-marker[data-kind="camp"] {
            background-image: url("/icons/map-camp.webp");
            --symbol: 20;
        }
        .map-marker[data-kind="harbour"] {
            background-image: url("/icons/map-dverger-harbor.webp");
        }
        .map-marker[data-kind="harbour"] {
            --symbol: 32;
        }
        .map-marker[data-kind="dvergr"] {
            --symbol: 30;
        }
        .map-marker[data-kind="dvergr"] {
            background-image: url("/icons/map-dverger-home.webp");
        }
        .map-marker[data-kind="dvergr-infested"] {
            background-image: url("/icons/map-dverger-infested.webp");
            --symbol: 30;
        }
        .map-marker[data-kind="dvergr-empty"] {
            background-image: url("/icons/map-dverger-home.webp");
            --symbol: 30;
        }
        .map-marker[data-kind="hut"] {
            background-image: url("/icons/map-hut.webp");
        }
        .map-marker[data-kind="post"] {
            background-image: url("/icons/map-post.webp");
            --symbol: 28;
        }
        .map-marker[data-kind="fortress"] {
            --symbol: 54;
        }
        .map-marker[data-kind="ruin"] {
            --symbol: 27;
        }
        .map-marker[data-kind="fortress"] {
            background-image: url("/icons/map-fortress.webp");
        }
        .map-marker[data-kind="ruin"] {
            background-image: url("/icons/map-ruin.webp");
        }
        .map-marker[data-kind="sunken-ruin"] {
            background-image: url("/icons/map-sunken-ruin.webp");
            --symbol: 27;
        }
        .map-marker[data-layer="settlements"] .map-marker-name {
            display: none;
        }
        .map-marker[data-layer="settlements"]:hover .map-marker-name {
            display: block;
        }
        .map-marker[data-kind="spawn"] {
            background-image: url("/icons/map-spawn.webp");
            z-index: 4;
        }
        .map-tiles img {
            position: absolute;
            inset: 0;
            display: block;
            inline-size: 100%;
            block-size: 100%;
            max-inline-size: none;
            max-block-size: none;
            image-rendering: pixelated;
            opacity: 0;
            transition: opacity 0.35s ease-out;
        }
        .map-markers .map-marker:hover {
            z-index: 5;
            --growth: 4;
        }
        .map-readout {
            position: absolute;
            inset-block-end: var(--space-tight);
            inset-inline-end: var(--space-tight);
            z-index: 3;
            display: flex;
            gap: var(--space-close);
            font-size: 0.75rem;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            color: oklch(99% 0 0);
            pointer-events: none;
            white-space: nowrap;
        }
        .map-readout > span {
            display: grid;
            grid-auto-flow: column;
            column-gap: 0.35em;
            align-items: baseline;
            padding: 0.15rem 0.5rem;
            background: oklch(12% 0.01 260 / 0.65);
            border-radius: 2px;
        }
        .map-readout .place {
            grid-template-columns: var(--cell-biome, 6rem) auto var(--cell-metres, 2.5rem);
        }
        .map-readout .position {
            grid-template-columns: var(--cell-axis, 3rem) auto var(--cell-axis, 3rem) auto var(--cell-way, 3.5rem);
        }
        .map-readout .biome {
            color: var(--gold);
            font-weight: 700;
        }
        .map-readout .metres {
            font-weight: 700;
        }
        .map-readout :is(.metres, .x, .way) {
            text-align: end;
        }
        .map-readout .y {
            text-align: start;
        }
        .map-readout {
            flex-direction: column;
            align-items: flex-end;
        }
        @media (min-width: 35rem) {
            .map-readout {
                flex-direction: row;
                align-items: normal;
            }
        }
        .map-readout[hidden] {
            display: none;
        }
        .map-tiles [data-tiles] img[data-present] {
            opacity: 1;
        }
        .map-tiles [data-tiles] {
            transition: opacity 0.35s ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            .map-tiles img,
            .map-tiles [data-tiles] { transition: none; }
        }
        .map-loading {
            position: absolute;
            display: grid;
            gap: var(--space-close);
            z-index: 3;
        }
        .map-loading[data-form="full"] {
            inset: 0;
            place-content: center;
            justify-items: center;
            backdrop-filter: blur(0.5rem) saturate(0.7);
            background: light-dark(oklch(100% 0 0 / 0.35), oklch(12% 0.01 260 / 0.45));
        }
        .map-loading[data-form="corner"] {
            inset-block-start: calc(2.5rem + 2 * var(--space-close));
            inset-inline-end: var(--space-close);
            gap: var(--space-hair);
            justify-items: start;
            box-sizing: content-box;
            inline-size: calc(var(--text-small) * 25);
            max-inline-size: calc(100% - 2 * var(--space-close) - 1rem);
            padding: 0.25rem 0.5rem;
            background: light-dark(oklch(100% 0 0 / 0.7), oklch(12% 0.01 260 / 0.7));
            box-shadow: inset 1px 1px 0 oklch(33% 0.014 260), inset -1px -1px 0 oklch(12% 0.01 260);
        }
        [data-form="corner"] > progress {
            block-size: 0.1875rem;
            inline-size: 100%;
            border: 0;
            background: oklch(70% 0.01 260 / 0.35);
        }
        [data-form="corner"] > progress::-webkit-progress-bar {
            background: oklch(70% 0.01 260 / 0.35);
        }
        [data-form="corner"] .map-phase {
            text-align: start;
            inline-size: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .map-loading[hidden] {
            display: none;
        }
        .map-phase {
            margin: 0;
            font-size: var(--text-small);
            letter-spacing: 0.04em;
            color: var(--ink-bright);
            text-align: center;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }
        .map-loading[data-error] .map-phase {
            color: var(--ink-quiet);
        }
        .map-loading[data-error] > progress {
            visibility: hidden;
        }
    }
}
@layer slices.slice_map {
    @scope (.map) to (.heading > *) {
        .map-tools {
            place-self: start end;
            z-index: 4;
            display: flex;
            gap: var(--space-close);
            margin: var(--space-close);
            min-inline-size: 0;
            max-inline-size: calc(100% - 4.75rem - 4 * var(--space-close) - var(--space-tight));
        }
        @media (min-width: 35rem) {
            .map-tools { max-inline-size: calc(100% - 2 * var(--space-close)); }
        }
        .map-tools > .map-tool { flex: 0 0 auto; }
        .map-tools > .map-tool[hidden] { display: none; }
        .map-tool {
            display: grid;
            place-items: center;
            inline-size: 2.5rem;
            block-size: 2.5rem;
            padding: 0;
            border: 0;
            cursor: pointer;
            background: color-mix(in oklch, var(--surface-0) 72%, transparent);
            box-shadow:
                inset 2px 2px 0 oklch(from var(--surface-4) calc(l + 0.12) c h),
                inset -2px -2px 0 oklch(from var(--surface-0) calc(l - 0.06) c h);
        }
        .map-tool:hover {
            background: color-mix(in oklch, var(--link) 6%, var(--surface-0) 72%);
            box-shadow:
                inset 2px 2px 0 oklch(from var(--surface-0) calc(l - 0.06) c h),
                inset -2px -2px 0 oklch(from var(--surface-4) calc(l + 0.12) c h);
        }
        .map-tool:focus-visible {
            outline: 2px solid var(--link);
            outline-offset: 2px;
        }
        .map-tool[aria-busy="true"] { cursor: progress; opacity: 0.6; }
        .map-tool .symbol {
            inline-size: 1.125rem;
            block-size: 1.125rem;
            background-repeat: no-repeat;
        }
        [data-symbol="save"] {
            --stroke: var(--ink-bright);
            background:
                linear-gradient(var(--stroke), var(--stroke)) 50% 0 / 2px 0.62rem,
                linear-gradient(45deg, transparent 46%, var(--stroke) 46% 54%, transparent 54%)
                    0.16rem 0.34rem / 0.4rem 0.4rem,
                linear-gradient(-45deg, transparent 46%, var(--stroke) 46% 54%, transparent 54%)
                    0.56rem 0.34rem / 0.4rem 0.4rem,
                linear-gradient(var(--stroke), var(--stroke)) 0 100% / 2px 0.34rem,
                linear-gradient(var(--stroke), var(--stroke)) 100% 100% / 2px 0.34rem,
                linear-gradient(var(--stroke), var(--stroke)) 0 100% / 100% 2px;
        }
        [data-symbol="share"] {
            --stroke: var(--ink-bright);
            --dot: 0.34rem;
            background:
                linear-gradient(-32deg, transparent 45%, var(--stroke) 45% 55%, transparent 55%)
                    0.1rem 0.1rem / 0.95rem 0.5rem,
                linear-gradient(32deg, transparent 45%, var(--stroke) 45% 55%, transparent 55%)
                    0.1rem 0.52rem / 0.95rem 0.5rem,
                radial-gradient(circle, var(--stroke) 48%, transparent 50%)
                    100% 0 / var(--dot) var(--dot),
                radial-gradient(circle, var(--stroke) 48%, transparent 50%)
                    100% 100% / var(--dot) var(--dot),
                radial-gradient(circle, var(--stroke) 48%, transparent 50%)
                    0 50% / var(--dot) var(--dot);
        }
        [data-symbol="info"] {
            --stroke: var(--ink-bright);
            --dot: 0.34rem;
            background:
                radial-gradient(circle, var(--stroke) 48%, transparent 50%)
                    50% 0 / var(--dot) var(--dot),
                linear-gradient(var(--stroke), var(--stroke)) 50% 100% / 2px 0.66rem,
                linear-gradient(var(--stroke), var(--stroke)) 50% 100% / 0.5rem 2px,
                linear-gradient(var(--stroke), var(--stroke)) 0.34rem 0.46rem / 0.25rem 2px;
        }
        .map-sheet {
            position: fixed;
            inset: 0;
            margin: auto;
            z-index: var(--sheet-layer);
            inline-size: min(var(--sheet-inline-size), calc(100% - 2 * var(--sheet-margin)));
            max-block-size: var(--sheet-max-block-size);
            overflow-y: auto;
            padding: 0;
            border: var(--sheet-edge) solid var(--gold);
            background: var(--surface-4);
            color: var(--ink);
            box-shadow: var(--sheet-shadow);
        }
        .map-sheet::backdrop {
            background: var(--sheet-scrim);
        }
        .map-sheet > header {
            position: sticky;
            inset-block-start: 0;
            display: grid;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem 1rem;
            background: var(--surface-4);
        }
        .map-sheet .with-close {
            position: absolute;
            inset-block-start: 0.25rem;
            inset-inline-end: 0.25rem;
            z-index: 1;
        }
        .map-sheet > header b {
            font-size: var(--text-large, 1.125rem);
        }
        .map-sheet .dossier {
            padding: 0 1rem 0.5rem;
        }
        .map-sheet .head {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: baseline;
        }
        .map-sheet .title {
            font-weight: 700;
        }
        .map-sheet .aside,
        .map-sheet .dimensions {
            font-size: var(--text-small, 0.875rem);
            color: var(--ink-muted, var(--ink));
        }
        .map-sheet .preview {
            inline-size: 100%;
            aspect-ratio: 16 / 9;
            margin-block-end: var(--space-close);
            background: var(--surface-0);
        }
        .map-sheet .text {
            inline-size: 100%;
            resize: none;
            font: inherit;
            font-size: var(--text-small, 0.875rem);
            padding: var(--space-close);
            border: 1px solid var(--surface-0);
            background: var(--surface-0);
            color: var(--ink);
        }
        .map-sheet .picture-canvas {
            inline-size: calc(100% - 2rem);
            aspect-ratio: 1;
            margin: 0 1rem var(--space-close);
            background: var(--surface-0);
        }
        .map-sheet .progress-bar {
            margin: 0 1rem var(--space-close);
        }
        .map-sheet .progress-bar .progress {
            --progress-width: 100%;
        }
        .map-sheet .button {
            --button-display: block;
            --button-width: calc(100% - 2rem);
            margin: 0 1rem 1rem;
        }
        .info-sheet {
            font-size: var(--text);
            scrollbar-width: thin;
            scrollbar-color: var(--gold) transparent;
        }
        @media (min-width: 35rem) {
            .info-sheet {
                inline-size: min(calc(60ch + 2rem + 2 * var(--sheet-edge)), calc(100% - 2rem));
            }
            .info-sheet .prose {
                --prose-max: 60ch;
            }
        }
        .info-sheet .dossier {
            display: grid;
            gap: var(--space-snug);
            padding-block-end: 1rem;
        }
        .info-sheet .heading {
            margin: var(--space-snug) 0 0;
        }
        .info-sheet .heading:is(h2) {
            --heading-size: var(--text-large);
            --heading-ink: var(--gold);
        }
        .info-sheet .heading:is(h3) { --heading-size: var(--text); }
        .info-sheet .dossier > .heading:first-child {
            margin-block-start: 0;
        }
        .info-sheet .prose {
            margin: 0;
        }
        .info-sheet .rule {
            block-size: 0;
            margin-block: calc(2 * var(--space-close) - var(--space-snug));
            margin-inline: 0;
            border: 0;
            border-block-start: 1px dashed var(--gold);
        }
        .info-sheet .rule + .heading {
            margin-block-start: 0;
        }
        .info-sheet .shares {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: var(--space-tight) var(--space-snug);
        }
        .info-sheet .share {
            --fill: var(--biome-edge);
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
            align-items: center;
        }
        .share .metric { --metric-display: contents; }
        .share dt {
            grid-row: 1;
            grid-column: 1;
            font-family: inherit;
            font-size: var(--text);
            letter-spacing: normal;
            text-transform: none;
            color: var(--ink);
        }
        .share dd {
            grid-row: 1;
            grid-column: 2;
            padding-inline: var(--space-tight);
            font-size: var(--text-small);
            line-height: 1.6;
            text-align: end;
            color: var(--ink-bright);
            background: linear-gradient(to right,
                var(--fill) var(--share), var(--surface-0) var(--share));
        }
        .share[data-over] dd { color: var(--gold); }
        .share[data-biome="ocean"]       { --fill: var(--biome-ocean); }
        .share[data-biome="meadows"]     { --fill: var(--biome-meadows); }
        .share[data-biome="swamp"]       { --fill: var(--biome-swamp); }
        .share[data-biome="mountain"]    { --fill: var(--biome-mountain); }
        .share[data-biome="blackforest"] { --fill: var(--biome-forest); }
        .share[data-biome="plains"]      { --fill: var(--biome-plains); }
        .share[data-biome="ashlands"]    { --fill: var(--biome-ashlands); }
        .share[data-biome="deepnorth"]   { --fill: var(--biome-deepnorth); }
        .share[data-biome="mistlands"]   { --fill: var(--biome-mistlands); }
    }
}
@layer slices.slice_map {
    @scope (.map) to (.heading > *) {
        .panel,
        .content { display: contents; }
        .map-tab { display: none; }
        .content > * { grid-column: content; }
    }
}
@layer slices.slice_map {
    @scope (.map) to (.heading > *) {
        .seed-bar {
            display: flex;
            align-items: center;
            gap: var(--space-snug);
            min-inline-size: 0;
            block-size: 2.5rem;
            padding-inline: var(--space-close) var(--space-snug);
            background: color-mix(in oklch, var(--surface-0) 72%, transparent);
            box-shadow:
                inset 2px 2px 0 oklch(from var(--surface-4) calc(l + 0.12) c h),
                inset -2px -2px 0 oklch(from var(--surface-0) calc(l - 0.06) c h);
        }
        .seed-bar > .heading {
            --heading-min: 0;
            margin: 0;
            --heading-size: 0.625rem;
            --heading-leading: 1;
            --heading-space: nowrap;
            --heading-overflow: hidden;
            --heading-ellipsis: ellipsis;
        }
        @media (min-width: 35rem) {
            .seed-bar > .heading { --heading-size: 1rem; }
        }
        @media (max-width: 34.99rem) {
            .seed-bar > .heading {
                --heading-lead-position: absolute;
                --heading-lead-width: 1px;
                --heading-lead-height: 1px;
                --heading-lead-overflow: hidden;
                --heading-lead-clip: inset(50%);
                --heading-lead-space: nowrap;
            }
        }
        .seed-bar > .icon-button {
            flex: 0 0 auto;
            --icon-button-width: auto;
            --icon-button-size: var(--text-large);
            --icon-button-leading: 1;
            --icon-button-ink: var(--gold);
            anchor-name: --map-star;
        }
        .seed-bar > .icon-button:hover {
            --icon-button-ink-hover: oklch(from var(--gold) calc(l + 0.08) c h);
        }
        .map-fav {
            position: fixed;
            position-anchor: --map-star;
            position-area: block-end span-inline-start;
            position-try-fallbacks: flip-block, flip-inline;
            margin: var(--space-tight);
            inline-size: min(22rem, calc(100vi - 2 * var(--space-close)));
            gap: var(--space-snug);
            padding: var(--space-close);
            border: var(--sheet-edge) solid var(--gold);
            background: var(--surface-1);
            color: var(--ink-bright);
            opacity: 0;
            transition-property: opacity, overlay, display;
            transition-duration: 300ms;
            transition-behavior: allow-discrete;
            z-index: 9999;
        }
        .map-fav:popover-open { display: grid; opacity: 1; }
        @starting-style {
            .map-fav:popover-open { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .map-fav { transition-duration: 1ms; }
        }
        .map-fav > header {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: var(--space-snug);
        }
        .map-fav .remember {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: var(--space-snug);
            justify-items: end;
        }
        .map-fav .remember > .field {
            grid-column: 1 / -1;
            justify-self: stretch;
        }
    }
}

@layer layouts.map {
    @scope ([data-layout="map"]) {
        :scope {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr) auto;
            block-size: 100dvb;
            overflow: hidden;
        }
        [data-region="content"] {
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            min-block-size: 0;
        }
        [data-region="content"] > .header-banner { grid-row: 1; }
        [data-region="content"] > .map          { grid-row: 2; }
    }
}
@layer layouts.map {
    @scope ([data-layout="map"]) {
        @media (max-width: 34.99rem) {
            .page-footer {
                display: none;
            }
        }
    }
}
@layer layouts.map {
    @scope ([data-layout="map"]) {
        .header-banner {
            display: none;
        }
        .map {
            grid-template-rows: minmax(0, 1fr);
            row-gap: 0;
            padding-block: 0;
        }
        .map > * {
            grid-column: full;
            grid-row: 1;
        }
        .map > .panel {
            --tab: 2.25rem;
            display: grid;
            --quick: 0rem;
            grid-template-columns: minmax(0, 1fr) var(--quick) var(--tab);
            place-self: start start;
            z-index: 3;
            inline-size: calc(100% - 2 * var(--space-tight));
            max-block-size: calc(100% - 2 * var(--space-tight));
            grid-template-rows: minmax(0, 1fr);
            --columns: 1;
            margin: var(--space-tight);
            transition: translate 280ms ease;
            position: relative;
            background: oklch(8% 0.008 260 / 0.85);
            box-shadow:
                inset  2px  2px 0 oklch(33% 0.014 var(--hue-surface)),
                inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface));
        }
        @media (min-width: 35rem) {
            .map > .panel {
                inline-size: min(24rem, calc(100% - 2 * var(--space-close)));
                max-block-size: calc(100% - 2 * var(--space-close));
                margin: var(--space-close);
            }
        }
        .map > .panel::after {
            content: "";
            position: absolute;
            inset-block-end: 0;
            inset-inline-end: 0;
            inline-size: 0.9375rem;
            block-size: 0.9375rem;
            border-block-end: 0.3125rem solid var(--gold);
            border-inline-end: 0.3125rem solid var(--gold);
            pointer-events: none;
        }
        .panel > .content {
            grid-column: 1;
            min-inline-size: 0;
            min-block-size: 0;
            display: grid;
            grid-template-columns: [content-start] minmax(0, 1fr) [content-end];
            grid-template-rows: minmax(0, 1fr);
        }
        .content > .map-options {
            min-block-size: 0;
            display: grid;
            grid-template-rows: auto auto auto minmax(0, 1fr);
            padding: var(--space-close);
        }
        .map-options > .options {
            min-block-size: 0;
            display: grid;
            grid-template-rows: auto minmax(0, 1fr);
            margin-block-start: var(--space-close);
        }
        .panel > .map-tab {
            grid-column: 3;
            align-self: stretch;
            display: grid;
            place-items: center;
            position: relative;
            cursor: pointer;
            background: oklch(20% 0.008 260 / 0.62);
            box-shadow:
                inset  2px  2px 0 oklch(38% 0.014 var(--hue-surface)),
                inset -2px -2px 0 oklch(14% 0.010 var(--hue-surface));
        }
        .panel > .map-tab:hover {
            background: color-mix(in oklch, var(--gold) 10%, oklch(20% 0.008 260 / 0.62));
            box-shadow:
                inset  2px  2px 0 oklch(14% 0.010 var(--hue-surface)),
                inset -2px -2px 0 oklch(38% 0.014 var(--hue-surface));
        }
        .map-tab input {
            grid-area: 1 / 1;
            inline-size: 100%;
            block-size: 100%;
            margin: 0;
            appearance: none;
            opacity: 0;
            cursor: pointer;
        }
        .map-tab:has(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: -2px;
        }
        .map-tab .word {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }
        .map-tab::after {
            content: "";
            grid-area: 1 / 1;
            inline-size: 0.75rem;
            block-size: 0.75rem;
            border-inline-end: 0.1875rem solid var(--gold);
            border-block-end: 0.1875rem solid var(--gold);
            transform: translateX(25%) rotate(135deg);
            transition: transform 90ms steps(3);
            pointer-events: none;
        }
        .map[data-panel="closed"] .map-tab::after {
            transform: translateX(-25%) rotate(-45deg);
        }
        @media (prefers-reduced-motion: reduce) {
            .map-tab::after { transition: none; }
        }
        .panel .checkbox {
            color: var(--ink-bright);
            text-shadow: 1px 1px 0 oklch(0% 0 0 / 0.9), -1px 1px 0 oklch(0% 0 0 / 0.9);
        }
        .panel .seed-form {
            background: none;
            box-shadow: none;
            padding-inline: 0;
            padding-block-start: 0;
        }
        .panel > .quick {
            grid-column: 2;
            display: none;
            align-content: start;
            justify-items: center;
            gap: var(--space-close);
            padding: var(--space-close);
            --quick-size: 2.5rem;
            grid-template-rows: auto;
            justify-items: start;
        }
        .map:not([data-ready]) > .panel {
            transition: none;
        }
        .map[data-panel="closed"] > .panel {
            --quick: calc(2.5rem + 2 * var(--space-close));
            translate: calc(var(--tab) + var(--quick) - 100% - var(--space-close)) 0;
        }
        .map[data-panel="closed"] .panel > .content {
            display: none;
        }
        .map[data-panel="closed"] .panel > .quick {
            display: grid;
        }
        @media (prefers-reduced-motion: reduce) {
            .map > .panel { transition-duration: 1ms; }
        }
        .page-footer {
            --donate-height: 1.625rem;
            --donate-font: 0.75rem;
            padding-block: var(--space-tight);
            row-gap: 0;
            align-items: center;
            border-block-start: none;
            grid-template-areas: none;
            grid-template-columns:
                [full-start] var(--edge)
                [content-start] auto var(--space-close) auto var(--space-close)
                1fr var(--space-close) auto
                [content-end] var(--edge)
                [full-end];
        }
        .page-footer > .prose,
        .page-footer > .page-footer-nav {
            display: none;
        }
        .page-footer > .donate-button {
            grid-column: 2;
            grid-row: 1;
        }
        .page-footer > .footer-legal {
            grid-column: 6;
            grid-row: 1;
            justify-self: center;
            margin-block-start: 0;
            margin-inline: 0;
        }
        .page-footer .footer-legal .prose {
            display: none;
        }
        @media (min-width: 60rem) {
            .page-footer > .prose,
            .page-footer > .page-footer-nav {
                display: block;
            }
            .page-footer > .prose {
                grid-column: 2;
                grid-row: 1;
                justify-self: start;
            }
            .page-footer > .donate-button {
                grid-column: 4;
            }
            .page-footer > .page-footer-nav {
                grid-column: 8;
                grid-row: 1;
                justify-self: end;
            }
        }
        .page-footer .footer-legal .prose {
            display: none;
        }
        }
}