/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The project default definitions: what every page kind reaches, loaded on every page. */
@layer tokens, base, elements, widgets, slices, layouts, templates;
@layer
    elements.beta_badge,
    elements.biome_bar,
    elements.button,
    elements.checkbox,
    elements.chip,
    elements.choice,
    elements.donate_button,
    elements.field,
    elements.game_icon,
    elements.grade_mark,
    elements.heading,
    elements.icon_button,
    elements.link,
    elements.logo_picture,
    elements.logo_text,
    elements.menu_toggle,
    elements.metric,
    elements.picture,
    elements.pill,
    elements.progress,
    elements.prose,
    elements.quick_button,
    elements.strip,
    elements.world_view,
    widgets.breadcrumbs,
    widgets.category_accordion,
    widgets.control_bar,
    widgets.dps_graph,
    widgets.footer_legal,
    widgets.grade_list,
    widgets.group_accordion,
    widgets.header_banner,
    widgets.header_logo,
    widgets.header_menu,
    widgets.header_options,
    widgets.item_dossier,
    widgets.item_sheet,
    widgets.item_tile,
    widgets.metric_row,
    widgets.notice_band,
    widgets.page_footer_nav,
    widgets.search_form,
    widgets.seed_form,
    widgets.tool_card,
    slices.page_footer,
    slices.page_header,
    slices.slice_gold_seed,
    slices.slice_gold_seeds,
    slices.slice_grade_cards,
    slices.slice_grade_compare,
    slices.slice_grade_graph,
    slices.slice_grades,
    slices.slice_headlines,
    slices.slice_intro,
    slices.slice_item,
    slices.slice_items,
    slices.slice_legal,
    slices.slice_map,
    slices.slice_metrics,
    slices.slice_news,
    slices.slice_status,
    slices.slice_tip,
    slices.slice_tips,
    slices.slice_tools,
    slices.slice_tree,
    layouts.map;

@layer tokens {
    :root {
        color-scheme: dark;
        --scale-base:  0.875rem;
        --text-stage:  1.4375rem;
        --text-head:   1.1875rem;
        --face-text: "Oxanium", "Oxanium Fallback", system-ui, sans-serif;
        --text-label:  0.625rem;
        --text-micro:  calc(var(--scale-base) / 1.618);   
        --text-small:  calc(var(--scale-base) / 1.272);   
        --text:        var(--scale-base);                 
        --text-large:  calc(var(--scale-base) * 1.272);   
        --text-title:  calc(var(--scale-base) * 2.058);   
        --space-hair:  calc(var(--scale-base) * 0.146);
        --space-tight: calc(var(--scale-base) * 0.236);
        --space-snug:  calc(var(--scale-base) * 0.382);
        --space-close: calc(var(--scale-base) * 0.618);
        --space:       var(--scale-base);
        --space-open:  calc(var(--scale-base) * 1.618);
        --control-height: 2.6875rem;
        --head-height: 4.25rem;
        --space-wide:  calc(var(--scale-base) * 2.618);
        --sheet-margin:          1rem;
        --sheet-inline-size:     25rem;
        --sheet-max-block-size:  min(56.25rem, calc(100dvb - 2 * var(--sheet-margin)));
        --sheet-edge:            3px;
        --sheet-shadow:          0 24px 64px oklch(0% 0 0 / 0.55);
        --sheet-scrim:           oklch(0% 0 0 / 0.6);
        --sheet-layer:           9999;
        --measure:     90rem;
        --gutter:      2.5rem;
        --pixel-grid:  8px;
        --hue-surface: 260;
        --c-surface:   0.010;
        --surface-0:  light-dark(oklch(99% var(--c-surface) var(--hue-surface)),
                                 oklch(12% var(--c-surface) var(--hue-surface)));
        --surface-1:  light-dark(oklch(97% var(--c-surface) var(--hue-surface)),
                                 oklch(15% var(--c-surface) var(--hue-surface)));
        --surface-2:  light-dark(oklch(94% var(--c-surface) var(--hue-surface)),
                                 oklch(17% var(--c-surface) var(--hue-surface)));
        --surface-3:  light-dark(oklch(91% var(--c-surface) var(--hue-surface)),
                                 oklch(18% var(--c-surface) var(--hue-surface)));
        --surface-4:  light-dark(oklch(86% var(--c-surface) var(--hue-surface)),
                                 oklch(21% var(--c-surface) var(--hue-surface)));
        --ink-bright: light-dark(oklch(20% 0.005 90),  oklch(95% 0.005 90));
        --ink:        light-dark(oklch(28% 0.008 var(--hue-surface)),
                                 oklch(70% 0.008 var(--hue-surface)));
        --ink-quiet:  light-dark(oklch(42% 0.008 var(--hue-surface)),
                                 oklch(61% 0.008 var(--hue-surface)));
        --ground:     var(--surface-0);
        --ground-up:  var(--surface-2);
        --brand:      oklch(68% 0.18  35);
        --link:       oklch(76% 0.17 130);
        --gold:       oklch(80% 0.13 85);
        --danger:     oklch(66% 0.19 28);
        --rank-1:     var(--ink-bright);
        --rank-2:     oklch(86.7% 0.291 143);
        --rank-3:     oklch(65% 0.14 252);
        --rank-4:     oklch(70% 0.321 329);
        --chart-1:    oklch(82% 0 0);
        --chart-2:    oklch(74% 0.14  10);
        --chart-3:    oklch(74% 0.14  40);
        --chart-4:    oklch(74% 0.14  70);
        --chart-5:    oklch(74% 0.14 100);
        --chart-6:    oklch(74% 0.14 160);
        --chart-7:    oklch(74% 0.14 190);
        --chart-8:    oklch(74% 0.14 220);
        --chart-9:    oklch(74% 0.14 250);
        --chart-10:   oklch(74% 0.14 280);
        --chart-11:   oklch(74% 0.14 310);
        --damage-slash:     oklch(90% 0 0);
        --damage-pierce:    oklch(76% 0 0);
        --damage-blunt:     oklch(62% 0 0);
        --damage-damage:    oklch(50% 0 0);
        --damage-fire:      oklch(74% 0.14  35);
        --damage-frost:     oklch(74% 0.14 230);
        --damage-lightning: oklch(74% 0.14 300);
        --damage-poison:    oklch(74% 0.14  95);
        --damage-spirit:    oklch(74% 0.14 195);
        --interlace:      linear-gradient(180deg,
                              oklch(0% 0 0 / 0.14) 0 1px, transparent 1px 3px);
        --interlace-size: 100% 3px;
    }
    :root { --gutter: var(--space); }
    @media (min-width: 35rem) {
        :root {
            --gutter:     2.5rem;
            --scale-base: 0.9375rem;
            --text-stage: 1.875rem;
            --text-head:  1.375rem;
            --text-label: 0.6875rem;
        }
    }
    @media (min-width: 60rem) {
        :root {
            --scale-base: 1.0625rem;
            --text-stage: 2.75rem;
            --text-head:  1.75rem;
            --text-label: 0.75rem;
        }
    }
    @media (resolution >= 2x) { :root { --pixel-grid: 4px; } }
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }
    :where(body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd) { margin: 0; }
    :where(ul[role="list"], ol[role="list"]) { padding: 0; list-style: none; }
    html {
        font-size: 100%;
        -webkit-text-size-adjust: none;
    }
    body {
        font-family: var(--face-text);
        font-size: var(--text);
        line-height: 1.5;
        color: var(--ink);
        background: var(--ground);
    }
    :where(img, picture, svg) { display: block; max-inline-size: 100%; }
    :where(input, button, select, textarea) { font: inherit; color: inherit; }
    .slice {
        display: grid;
        --edge: max(var(--gutter), (100% - var(--measure)) / 2);
        grid-template-columns:
            [full-start] var(--edge)
            [content-start] minmax(0, 1fr)
            [content-end] var(--edge)
            [full-end];
    }
    .slice > * { grid-column: content; }
    .with-bg-gray {
        background: var(--surface-1);
        border-block: 1px solid oklch(30% 0.014 var(--hue-surface));
    }
}

@layer tokens {
    [data-theme="valheim"] {
        --stage-scan:
            linear-gradient(180deg,
                oklch(0% 0 0 / 0.28) 0 1px,
                transparent 1px 3px);
        --stage-bar:
            linear-gradient(180deg,
                oklch(30% 0.09 40) 0 14%,
                oklch(45% 0.14 42) 0 28%,
                oklch(58% 0.18 45) 0 42%,
                oklch(62% 0.17 55) 0 50%,
                oklch(58% 0.18 45) 0 58%,
                oklch(45% 0.14 42) 0 72%,
                oklch(28% 0.08 38) 0 86%,
                oklch(16% 0.05 35) 0 100%);
        --stage-ink:   oklch(97% 0.02 40);
        --biome-meadows:   oklch(74% 0.14 130);
        --biome-forest:    oklch(52% 0.10 150);
        --biome-swamp:     oklch(44% 0.07  95);
        --biome-mountain:  oklch(88% 0.03 230);
        --biome-plains:    oklch(80% 0.13  85);
        --biome-mistlands: oklch(46% 0.05 280);
        --biome-ashlands:  oklch(58% 0.19  35);
        --biome-deepnorth: oklch(84% 0.05 210);
        --biome-ocean:     oklch(56% 0.10 235);
        --biome-edge:      oklch(38% 0.02 260);
    }
}

@layer elements.beta_badge {
    @scope (.beta-badge) {
        :scope {
            --badge-face:   oklch(from var(--danger) 0.50 c h);
            --badge-light:  oklch(from var(--badge-face) calc(l + 0.13) c h);
            --badge-shadow: oklch(from var(--badge-face) calc(l - 0.13) c h);
            display: inline-block;
            padding: 0.375rem 0.5rem 0.3125rem;
            background: var(--badge-face);
            color: oklch(100% 0 0);
            border: 1px solid oklch(0% 0 0);
            box-shadow:
                inset  2px  2px 0 0 var(--badge-light),
                inset -2px -2px 0 0 var(--badge-shadow);
            font-family: "Press Start 2P", monospace;
            font-weight: 400;
            font-size: 0.5rem;
            line-height: 1;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            translate: 0 -0.0625rem;
        }
    }
}

@layer elements.chip {
    @scope (.chip) {
        :scope {
            font-family: ui-monospace, monospace;
            font-size: var(--chip-size, var(--text-micro));
            letter-spacing: var(--chip-tracking, 0.16em);
            text-transform: uppercase;
            color: var(--chip-ink, var(--link));
            padding: var(--chip-padding);
            background: var(--chip-ground);
            box-shadow: var(--chip-edge);
        }
        :scope.with-gold { color: var(--chip-ink, var(--gold)); }
    }
}

@layer elements.donate_button {
    @scope (.donate-button) {
        :scope {
            --height: var(--donate-height, var(--control-height));
            display: inline-flex;
            align-items: center;
            gap: calc(var(--height) * 0.22);
            block-size: var(--height);
            padding-inline: calc(var(--height) * 0.3) calc(var(--height) * 0.42);
            background: oklch(100% 0 0);
            color: oklch(24.4% 0 0);
            border-radius: calc(var(--height) * 0.3);
            font-size: var(--donate-font, var(--text-small));
            font-weight: 700;
            line-height: 1;
            white-space: nowrap;
            text-decoration: none;
        }
        img {
            block-size: calc(var(--height) * 0.52);
            inline-size: auto;
        }
        :scope:where(:hover, :focus-visible) {
            background: oklch(93% 0 0);
        }
        :scope:where(:hover, :focus-visible) img {
            animation: cup-wobble 600ms ease-in-out;
        }
        :scope:focus-visible {
            outline: 2px solid var(--link);
            outline-offset: var(--space-tight);
        }
        @media (prefers-reduced-motion: reduce) {
            :scope:where(:hover, :focus-visible) img { animation: none; }
        }
    }
    @keyframes cup-wobble {
        0%, 100% { transform: rotate(0deg); }
        25%      { transform: rotate(-12deg); }
        50%      { transform: rotate(10deg); }
        75%      { transform: rotate(-6deg); }
    }
}

@layer tokens {
    @font-face {
        font-family: "Oxanium";
        src: url("/fonts/oxanium.woff2") format("woff2");
        font-weight: 200 800;
        font-display: swap;
    }
    @font-face {
        font-family: "Press Start 2P";
        src: url("/fonts/press-start-2p.woff2") format("woff2");
        font-weight: 400;
        font-display: swap;
    }
    @font-face {
        font-family: "Oxanium Fallback";
        src: local("Helvetica Neue"), local("Arial");
        ascent-override: 79%;
        descent-override: 21%;
        line-gap-override: 25%;
        size-adjust: 99%;
    }
}

@layer elements.heading {
    @scope (.heading) {
        :scope {
            font-family: var(--heading-face, "Press Start 2P", monospace);
            font-weight: var(--heading-weight, 400);
            font-size: var(--heading-size);
            color: var(--heading-ink, var(--ink-bright));
            text-wrap: pretty;
            line-height: var(--heading-leading, 1.55);
            text-transform: var(--heading-case);
            letter-spacing: var(--heading-tracking);
            text-shadow: var(--heading-shadow);
            hyphens: var(--heading-hyphens);
            overflow-wrap: var(--heading-wrap);
            white-space: var(--heading-space);
            overflow: var(--heading-overflow);
            text-overflow: var(--heading-ellipsis);
            min-inline-size: var(--heading-min);
            padding-block: var(--heading-pad);
        }
        :scope:is(h1) { font-size: var(--heading-size, var(--text-head)); }
        :scope:is(h2) { font-size: var(--heading-size, var(--text-head)); }
        :scope:is(h3) { font-size: var(--heading-size, var(--text-large)); }
        :scope:is(h4) { font-size: var(--heading-size, var(--scale-base)); }
        .lead {
            position: var(--heading-lead-position);
            inline-size: var(--heading-lead-width);
            block-size: var(--heading-lead-height);
            overflow: var(--heading-lead-overflow);
            clip-path: var(--heading-lead-clip);
            white-space: var(--heading-lead-space);
        }
    }
}

@layer elements.icon_button {
    @scope (.icon-button) {
        :scope {
            display: var(--icon-button-display, grid);
            place-items: center;
            inline-size: var(--icon-button-width, var(--space-open));
            aspect-ratio: 1;
            background: none;
            border: 0;
            color: var(--icon-button-ink, var(--ink-quiet));
            font-size: var(--icon-button-size, var(--text-large));
            line-height: var(--icon-button-leading, 1);
            cursor: var(--icon-button-cursor, pointer);
        }
        :scope:where(:hover, :focus-visible) {
            color: var(--icon-button-ink-hover, var(--icon-button-ink, var(--link)));
        }
        :scope.with-close {
            inline-size: var(--icon-button-width, calc(var(--space-open) * 2));
            font-size: var(--icon-button-size, calc(var(--text-large) * 2));
        }
        :scope.with-close:where(:hover, :focus-visible) {
            color: var(--icon-button-ink-hover, var(--icon-button-ink, var(--gold)));
        }
    }
}

@layer elements.link {
    @scope (.link) {
        :scope {
            color: var(--link-ink, var(--link));
            font-family: var(--link-face);
            font-size: var(--link-size);
            letter-spacing: var(--link-tracking);
            text-transform: var(--link-case);
            text-decoration: var(--link-line, none);
            text-underline-offset: var(--link-line-offset);
            text-decoration-thickness: var(--link-line-thickness);
            display: var(--link-display);
            align-content: var(--link-align);
            min-block-size: var(--link-height);
        }
        :scope:where(:hover, :focus-visible) {
            color: var(--link-ink-hover, var(--link-ink, var(--link)));
        }
        :scope:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: var(--space-tight);
        }
        :scope:where(:hover) {
            text-decoration-line: var(--link-line-hover, var(--link-line, underline));
            text-underline-offset: var(--link-line-offset, var(--space-tight));
        }
        :scope[aria-current] {
            text-decoration-line: var(--link-line-current, var(--link-line, underline));
            text-underline-offset: var(--link-line-offset, var(--space-tight));
        }
        > span {
            display: inline-block;
            margin-inline-start: var(--link-chevron-gap, 0.35em);
            font-size: var(--link-chevron-size);
            transition: transform 120ms ease-out;
        }
        :scope:where(:hover, :focus-visible) > span {
            transform: translateX(0.15em);
        }
        :scope.with-lead {
            display: grid;
            grid-template-columns: var(--space-close) auto;
            column-gap: var(--space-tight);
            align-items: baseline;
        }
        :scope.with-lead > span {
            grid-area: 1 / 1;
            justify-self: end;
            margin-inline-start: 0;
            color: var(--gold);
            font-size: 1.272em;
            line-height: 1;
            opacity: 0;
        }
        :scope.with-lead:is(:hover, :focus-visible) {
            color: var(--gold);
            text-decoration: none;
        }
        :scope.with-lead:where(:hover, :focus-visible) > span { opacity: 1; }
        :scope.with-cover::after {
            content: "";
            position: absolute;
            inset: 0;
        }
        @media (prefers-reduced-motion: reduce) {
            > span { transition: none; }
            :scope:where(:hover, :focus-visible) > span { transform: none; }
        }
    }
}

@layer elements.logo_picture {
    @scope (.logo-picture) {
        :scope {
            display: var(--logo-picture-display, grid);
            place-items: center;
            inline-size: 1.875rem;
            aspect-ratio: 1;
            background: var(--brand);
            box-shadow:
                inset  1.5px  1.5px 0 oklch(from var(--brand) calc(l + 0.14) c h),
                inset -1.5px -1.5px 0 oklch(from var(--brand) calc(l - 0.16) c h);
        }
        :scope::before {
            content: "";
            inline-size: 62%;
            aspect-ratio: 1;
            background: var(--ground);
            mask-image: url("/brand/signet.svg");
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
        }
    }
}

@layer elements.logo_text {
    @scope (.logo-text) {
        :scope {
            font-family: "Press Start 2P", monospace;
            font-weight: 400;
            font-size: 0.875rem;
            line-height: 1;
            letter-spacing: 0.04em;
            color: var(--ink);
        }
        > i {
            font-style: normal;
            color: var(--brand);
        }
    }
}

@layer elements.menu_toggle {
    @scope (.menu-toggle) {
        :scope {
            display: var(--menu-toggle-display, inline-block);
            font: inherit;
            letter-spacing: inherit;
            text-transform: inherit;
            color: var(--menu-toggle-ink, inherit);
            background: none;
            border: 0;
            padding: 0;
            cursor: pointer;
        }
        :scope:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: var(--space-tight);
        }
        :scope:where(:hover, :focus-visible) {
            color: var(--menu-toggle-ink-hover, var(--menu-toggle-ink, inherit));
        }
        :scope:where(:hover) {
            text-decoration: underline;
            text-underline-offset: var(--space-tight);
        }
    }
}

@layer elements.prose {
    @scope (.prose) {
        :scope {
            display: var(--prose-display, block);
            font-family: var(--prose-face);
            font-size: var(--prose-size, var(--text));
            line-height: var(--prose-leading, 1.6);
            letter-spacing: var(--prose-tracking);
            text-transform: var(--prose-case);
            color: var(--prose-ink, var(--ink));
            max-inline-size: var(--prose-max, 58ch);
            text-wrap: pretty;
        }
    }
}

@layer widgets.footer_legal {
    @scope (.footer-legal) {
        :scope {
            display: grid;
            gap: var(--space-tight);
            justify-items: center;
            text-align: center;
            max-inline-size: 80ch;
            margin-inline: auto;
            margin-block-start: var(--space-open);
        }
        :scope :where(small) {
            font-size: var(--footer-legal-size, var(--text-small));
            color: var(--ink-quiet);
            max-inline-size: none;
        }
        :scope :where(.prose) {
            --prose-size: var(--text-small);
            --prose-ink: var(--ink-quiet);
            --prose-max: none;
        }
        > p { margin: 0; }
        .links {
            display: flex;
            gap: var(--space-open);
            justify-content: center;
            flex-wrap: wrap;
            margin-block-start: var(--space-tight);
        }
        small {
            font-family: ui-monospace, monospace;
            font-variant-numeric: tabular-nums;
            letter-spacing: var(--footer-legal-tracking, 0.02em);
        }
        .carrier small {
            font-size: var(--footer-legal-size, 0.8125rem);
            letter-spacing: var(--footer-legal-tracking, 0.01em);
        }
    }
}

@layer widgets.header_banner {
    @scope (.header-banner) {
        :scope {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-areas:
                "title edition"
                "note  note";
            align-items: baseline;
            gap: var(--space-hair) var(--space-close);
            padding-block: var(--space) var(--space-close);
            padding-inline: max(var(--gutter), (100% - var(--measure)) / 2);
            border-block-end: 1px solid oklch(30% 0.014 260);
            color: var(--stage-ink);
            background: var(--stage-scan), var(--stage-bar);
            background-repeat: repeat, no-repeat;
            background-size: 100% 3px, 100% 200%;
            background-position: 0 0, 0 100%;
        }
        .heading {
            grid-area: title;
            margin: 0;
            --heading-size: var(--text-large);
            --heading-leading: 1.2;
            --heading-ink: oklch(99% 0.01 90);
            --heading-shadow: 2px 2px 0 oklch(22% 0.06 34);
        }
        .chip {
            grid-area: note;
            justify-self: start;
            align-self: center;
            --chip-padding: 0.3rem 0.6rem;
            --chip-size: 0.8125rem;
            --chip-tracking: 0.12em;
            --chip-ink: oklch(97% 0.02 70);
            --chip-ground: var(--surface-0);
            --chip-edge:
                inset  2px  2px 0 oklch(12% 0.010 var(--hue-surface)),
                inset -2px -2px 0 oklch(33% 0.014 var(--hue-surface));
        }
        .edition {
            grid-area: edition;
            margin: 0;
            font-size: var(--text-body);
            line-height: 1.1;
            letter-spacing: 0.02em;
            color: oklch(88% 0.06 70);
        }
        @media (min-width: 35rem) {
            :scope {
                grid-template-columns: auto 1fr auto;
                grid-template-areas: "title edition note";
                padding-block: var(--space-close);
            }
            .chip { justify-self: end; }
        }
        :scope.with-stage {
            grid-template-columns: 1fr;
            grid-template-areas:
                "title"
                "edition"
                "note";
            align-items: start;
            gap: var(--space-close);
            padding-block: 2.125rem 1.875rem;
            background-size: 100% 3px, auto;
            background-position: 0 0, 0 0;
            .heading {
                --heading-size: var(--text-stage);
                --heading-shadow: 3px 3px 0 oklch(22% 0.06 34);
            }
            .edition { font-size: var(--text-head); }
            .chip { align-self: end; }
        }
        @media (min-width: 35rem) {
            :scope.with-stage {
                grid-template-columns: 1fr auto;
                grid-template-areas:
                    "title   note"
                    "edition note";
                align-items: end;
            }
        }
    }
}

@layer widgets.header_logo {
    @scope (.header-logo) {
        :scope {
            padding-block: var(--header-logo-pad);
            display: grid;
            grid-auto-flow: column;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            justify-self: start;
        }
        :scope:where(:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: var(--space-tight);
        }
    }
}

@layer widgets.header_menu {
    @scope (.header-menu) {
        :scope { display: contents; }
        > .icon-button {
            grid-area: toggle;
        }
        > [popover] {
            inset: var(--sheet-margin);
            inset-block-end: auto;
            inline-size: auto;
            block-size: calc(100dvb - 2 * var(--sheet-margin));
            margin: 0;
            padding: var(--space-open);
            overflow-y: auto;
            z-index: var(--sheet-layer);
            border: var(--sheet-edge) solid var(--gold);
            background: var(--surface-4);
            color: var(--ink);
            box-shadow: var(--sheet-shadow);
            opacity: 0;
            transition-property: opacity, overlay, display;
            transition-duration: 500ms;
            transition-timing-function: ease;
            transition-behavior: allow-discrete;
        }
        > [popover]:popover-open {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            grid-template-areas:
                "mark title close"
                "list list  list";
            align-content: start;
            align-items: center;
            column-gap: var(--space-close);
            row-gap: var(--space);
            opacity: 1;
        }
        > [popover]:not(:popover-open) { pointer-events: none; }
        @starting-style {
            > [popover]:popover-open { opacity: 0; }
        }
        > [popover]::backdrop {
            background: var(--sheet-scrim);
            opacity: 0;
            transition-property: opacity, overlay, display;
            transition-duration: 500ms;
            transition-timing-function: ease;
            transition-behavior: allow-discrete;
        }
        > [popover]:popover-open::backdrop { opacity: 1; }
        @starting-style {
            > [popover]:popover-open::backdrop { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            > [popover],
            > [popover]::backdrop {
                transition-duration: 1ms;
            }
        }
        > [popover] > .logo-picture { grid-area: mark; }
        > [popover] > .title {
            grid-area: title;
            font-size: var(--text);
            color: var(--ink-bright);
        }
        > [popover] > .icon-button { grid-area: close; }
        > [popover] > ul {
            grid-area: list;
            display: grid;
            align-content: start;
        }
        > [popover]:popover-open :is(.menu-heading, [data-state="soon"]) {
            display: grid;
            justify-self: stretch;
            align-content: center;
            min-block-size: var(--control-height);
        }
        > [popover]:popover-open .link {
            justify-self: stretch;
            --link-display: grid;
            --link-align: center;
            --link-height: var(--control-height);
        }
        > [popover]:popover-open li > ul { justify-self: stretch; }
        > [popover]:popover-open > ul > li { font-size: var(--text); }
        > [popover]:popover-open > ul > li > .link:not([aria-current]) {
            --link-ink: var(--ink-bright);
            --link-ink-hover: var(--ink-bright);
        }
        > [popover] {
            font-family: ui-monospace, monospace;
            font-size: var(--text-small);
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        li {
            display: grid;
            justify-items: start;
            font-size: var(--text-small);
        }
        .link:not([aria-current]) { --link-ink: var(--ink-quiet); --link-ink-hover: var(--ink-quiet); }
        .link:where(:hover, :focus-visible) { --link-ink-hover: var(--ink); }
        [data-state="soon"] { color: var(--ink-quiet); cursor: default; }
        .menu-heading { color: var(--ink-bright); }
        .menu-toggle {
            --menu-toggle-display: none;
            --menu-toggle-ink: var(--ink-quiet);
            anchor-name: var(--below);
        }
        .menu-toggle:where(:hover, :focus-visible) { --menu-toggle-ink-hover: var(--ink); }
        li > ul:where([popover]) {
            display: grid;
            position: static;
            inset: auto;
            inline-size: auto;
            block-size: auto;
            margin: 0;
            padding: 0;
            padding-inline-start: calc(var(--space-open) - var(--space-close) - var(--space-tight));
            overflow: visible;
            border: 0;
            background: none;
            color: inherit;
        }
        @media (min-width: 60rem) {
            .icon-button { --icon-button-display: none; }
            > [popover] {
                display: contents;
            }
            > [popover]:not(:popover-open) { pointer-events: auto; }
            > [popover] > ul {
                grid-area: menu;
                place-self: center;
                grid-auto-flow: column;
                gap: var(--space-open);
            }
            .menu-heading,
            > [popover] > .title { display: none; }
            > [popover] > .logo-picture { --logo-picture-display: none; }
            .menu-toggle { --menu-toggle-display: inline-block; }
            li > ul:where([popover]) {
                position: fixed;
                position-anchor: var(--below);
                inset-inline-start: calc(anchor(start) - var(--space-open));
                inset-block-start: calc(anchor(--header-strip end) + 2px);
                padding-block: var(--space-open);
                padding-inline-end: var(--space-open);
                gap: var(--space-close);
                background: var(--surface-4);
                box-shadow:
                    inset  2px  2px 0 oklch(33% 0.014 var(--hue-surface)),
                    inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface));
            }
            li > ul:where([popover]):not(:popover-open) { display: none; }
        }
    }
}

@layer widgets.header_options {
    @scope (.header-options) {
        :scope {
            padding-block: var(--header-options-pad);
            position: relative;
            justify-self: end;
        }
        > summary {
            display: grid;
            place-items: center;
            min-inline-size: var(--space-wide);
            padding-block: var(--space-tight);
            padding-inline: var(--space-snug);
            border: 1px solid var(--surface-4);
            font-family: ui-monospace, monospace;
            font-size: var(--text-small);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--ink-quiet);
            cursor: pointer;
            list-style: none;
        }
        > summary::-webkit-details-marker { display: none; }
        > ul {
            position: absolute;
            inset-inline-end: 0;
            inset-block-start: calc(100% + var(--space-tight));
            z-index: 10;
            display: grid;
            gap: var(--space-tight);
            min-inline-size: max-content;
            padding: var(--space-snug);
            background: var(--ground-up);
            border: 1px solid var(--surface-4);
        }
        .link { --link-size: var(--text-small); --link-ink: var(--ink-quiet); --link-ink-hover: var(--ink-quiet); }
        .link:where(:hover, :focus-visible) { --link-ink-hover: var(--ink); }
        .link[aria-current] { --link-ink: var(--link); --link-ink-hover: var(--link); }
    }
}

@layer widgets.notice_band {
    @scope (.notice-band) {
        :scope {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: var(--space-close);
            padding: var(--space-close);
            background: oklch(12% 0.012 260 / 0.94);
            border: var(--sheet-edge) solid var(--gold);
            color: var(--ink-bright);
            position: fixed;
            inset-block-start: calc(var(--head-height) + var(--space-close));
            inset-inline: 0;
            margin-inline: auto;
            z-index: 5;
            inline-size: min(46rem, calc(100% - 2 * var(--gutter)));
        }
        .word {
            margin: 0;
            font-size: var(--text);
        }
    }
}

@layer widgets.page_footer_nav {
    @scope (.page-footer-nav) {
        ul {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-close);
            font-family: ui-monospace, monospace;
            font-size: 0.625rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        li { color: var(--ink-quiet); }
        li + li::before {
            content: "·";
            margin-inline-end: var(--space-close);
            color: var(--ink-quiet);
        }
        .link { --link-ink: var(--ink-quiet); --link-ink-hover: var(--ink-quiet); }
        .link:where(:hover, :focus-visible) { --link-ink-hover: var(--link); }
        span { color: var(--ink-quiet); }
    }
}

@layer slices.page_footer {
    @scope (.page-footer) {
        :scope {
            padding-block: 1.5rem;
            row-gap: 1rem;
        }
        .footer-legal small {
            --footer-legal-size: 0.65625rem;
            --footer-legal-tracking: 0.08em;
        }
        a.link {
            --link-ink: var(--ink-quiet);
            --link-ink-hover: var(--ink-quiet);
            --link-face: ui-monospace, monospace;
            --link-size: 0.65625rem;
            --link-tracking: 0.08em;
            --link-case: uppercase;
            --link-line: underline;
            --link-line-offset: 0.3em;
            --link-line-thickness: from-font;
        }
        a.link:where(:hover, :focus-visible) {
            --link-ink-hover: var(--ink);
        }
        .prose {
            --prose-face: ui-monospace, monospace;
            --prose-size: 0.65625rem;
            --prose-tracking: 0.08em;
            --prose-case: uppercase;
            --prose-ink: var(--ink-quiet);
            --prose-max: none;
        }
        > .donate-button {
            justify-self: start;
        }
        @media (min-width: 35rem) {
            :scope {
                grid-template-areas:
                    "name   games"
                    "donate ."
                    "legal  legal";
                grid-template-columns:
                    [full-start] var(--edge)
                    [content-start] auto var(--space-wide) 1fr
                    [content-end] var(--edge)
                    [full-end];
            }
            > .prose            { grid-column: 2; grid-row: 1; }
            > .page-footer-nav  { grid-column: 4; grid-row: 1; justify-self: end; }
            > .donate-button    { grid-column: 2; grid-row: 2; }
            > .footer-legal     { grid-column: 2 / 5; grid-row: 3; }
        }
    }
}

@layer slices.page_header {
    @scope (.page-header) {
        :scope {
            position: sticky;
            inset-block-start: 0;
            z-index: 6;
            grid-template-areas:
                ".    logo badge menu options toggle .   "
                "fort fort fort  fort fort    fort   fort";
            grid-template-columns:
                [full-start] var(--edge)
                [content-start] auto auto 1fr auto auto
                [content-end] var(--edge)
                [full-end];
            align-items: center;
            row-gap: 0;
            background: var(--surface-3);
            border-block-end: 1px solid oklch(30% 0.014 260);
            anchor-name: --header-strip;
        }
        > :where(nav) { padding-block: 1rem; }
        > :where(.header-logo) { --header-logo-pad: 1rem; }
        > :where(.header-options) { --header-options-pad: 1rem; }
        .header-logo    { grid-area: logo; }
        .beta-badge     { grid-area: badge; margin-inline-start: 0.75rem; }
        .header-options { grid-area: options; }
        :scope > nav > button { grid-area: toggle; }
        :scope > nav > ul     { grid-area: menu; }
        .progress-bar {
            grid-area: fort;
            background: var(--link);
            transform-origin: 0 50%;
            scale: 0 1;
            block-size: 0;
        }
        @supports (animation-timeline: scroll()) {
            .progress-bar {
                block-size: 0.3125rem;
                animation: reading-progress linear;
                animation-timeline: scroll(root block);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .progress-bar { transition: none; }
        }
        @media (min-width: 60rem) {
            :scope > nav > ul { justify-self: center; }
        }
    }
}
@layer slices.page_header {
    @keyframes reading-progress {
        to { scale: 1 1; }
    }
}

@layer templates.vga-page {
    @scope ([data-template="vga-page"]) {
        :scope {
            display: grid;
            grid-template-areas: "header" "content" "footer";
            grid-template-rows: auto 1fr auto;
            min-block-size: 100svb;
        }
        > header { grid-area: header; }
        > main   { grid-area: content; }
        > footer { grid-area: footer; }
        > main {
            display: grid;
            grid-template-columns: 1fr;
            align-content: start;
        }
    }
}
@layer templates.vga-page {
    :root {
        scrollbar-gutter: stable;
    }
    :root:has([popover]:popover-open) {
        overflow: hidden;
    }
    :root:has([popover]:popover-open) body {
        overflow: clip;
    }
}