/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The page kind landing: what it reaches beyond the default definitions, whose layer order it falls into. */
@layer elements.biome_bar {
    @scope (.biome-bar) {
        :scope {
            --biome: var(--surface-4);
            position: relative;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-tight) 1rem;
            aspect-ratio: var(--bar-ratio, 4717 / 646);
            max-inline-size: 100%;
            min-block-size: 4.5rem;
            padding: 0 1.25rem;
            overflow: hidden;
            color: var(--ink-bright);
            --bar-carrier: linear-gradient(90deg,
                oklch(10% 0.01 260 / 0.88) 0%,
                oklch(10% 0.01 260 / 0.62) 22%,
                oklch(10% 0.01 260 / 0.30) 42%,
                oklch(10% 0.01 260 / 0.30) 58%,
                oklch(10% 0.01 260 / 0.62) 78%,
                oklch(10% 0.01 260 / 0.88) 100%);
            --biome-gradient: linear-gradient(90deg,
                color-mix(in oklab, var(--biome) 35%, var(--surface-0)),
                color-mix(in oklab, var(--biome) 12%, var(--surface-0)));
            --lightening: transparent;
            background-image:
                var(--interlace),
                var(--bar-carrier),
                linear-gradient(var(--lightening), var(--lightening)),
                var(--biome-gradient);
            background-blend-mode: normal, normal, screen, normal, normal;
            background-size: var(--interlace-size), auto, auto, cover, cover;
            background-position: center, center, center, center, center;
            background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
            box-shadow:
                inset  2px  2px 0 oklch(33% 0.014 var(--hue-surface)),
                inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface));
        }
        :scope[data-biome="meadows"]     { --biome: var(--biome-meadows); }
        :scope[data-biome="blackforest"] { --biome: var(--biome-forest); }
        :scope[data-biome="swamp"]       { --biome: var(--biome-swamp); }
        :scope[data-biome="mountain"]    { --biome: var(--biome-mountain); }
        :scope[data-biome="plains"]      { --biome: var(--biome-plains); }
        :scope[data-biome="mistlands"]   { --biome: var(--biome-mistlands); }
        :scope[data-biome="ashlands"]    { --biome: var(--biome-ashlands); }
        :scope[data-biome="deepnorth"]   { --biome: var(--biome-deepnorth); }
        :scope[data-biome="ocean"]       { --biome: var(--biome-ocean); }
        :scope[data-biome="meadows"]     { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/meadows.webp"), var(--biome-gradient); }
        :scope[data-biome="blackforest"] { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/blackforest.webp"), var(--biome-gradient); }
        :scope[data-biome="swamp"]       { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/swamp.webp"), var(--biome-gradient); }
        :scope[data-biome="mountain"]    { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/mountain.webp"), var(--biome-gradient); }
        :scope[data-biome="plains"]      { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/plains.webp"), var(--biome-gradient); }
        :scope[data-biome="mistlands"]   { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/mistlands.webp"), var(--biome-gradient); }
        :scope[data-biome="ashlands"]    { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/ashlands.webp"), var(--biome-gradient); }
        :scope[data-biome="deepnorth"]   { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/deepnorth.webp"), var(--biome-gradient); }
        :scope[data-biome="ocean"]       { background-image: var(--interlace), var(--bar-carrier), linear-gradient(var(--lightening), var(--lightening)), url("/biome/ocean.webp"), var(--biome-gradient); }
        :scope:where(h2) { margin: 0; }
        :scope:where(a) {
            text-decoration: none;
            padding-block: var(--space-tight);
            --bar-carrier: linear-gradient(90deg,
                oklch(10% 0.01 260 / 0.88) 0%,
                oklch(10% 0.01 260 / 0.66) 22%,
                oklch(10% 0.01 260 / 0.55) 42%,
                oklch(10% 0.01 260 / 0.62) 58%,
                oklch(10% 0.01 260 / 0.80) 78%,
                oklch(10% 0.01 260 / 0.90) 100%);
        }
        :scope:where(a:hover, a:focus-visible) { --lightening: oklch(100% 0 0 / 0.10); }
        :scope:where(a:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: 2px;
        }
        .name,
        .note,
        .chevron {
            position: relative;
            text-shadow: 0 1px 3px oklch(0% 0 0 / 0.8);
        }
        .name {
            font-family: "Press Start 2P", monospace;
            font-size: var(--text-large);
            line-height: 1.55;
            color: var(--ink-bright);
        }
        .note {
            display: flex;
            flex-basis: var(--bar-note-basis, auto);
            justify-content: flex-end;
            align-items: baseline;
            gap: 0.5em;
            margin-inline-start: auto;
            color: var(--ink-bright);
            font-family: "Press Start 2P", monospace;
            font-size: var(--bar-note-size, var(--text-large));
            line-height: 1.55;
            font-variant-numeric: tabular-nums;
            i { font-style: normal; display: none; }
        }
        @media (min-width: 30rem) {
            .note i { display: inline; }
        }
        .chevron {
            align-self: center;
            color: var(--gold);
            font-size: var(--text-title);
            line-height: 1;
        }
    }
}

@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.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.game_icon {
    @scope (.game-icon) {
        :scope {
            display: var(--game-icon-display, block);
            inline-size: var(--game-icon-width, var(--space-wide));
            block-size: var(--game-icon-height, auto);
            vertical-align: var(--game-icon-valign);
            image-rendering: var(--game-icon-rendering, pixelated);
        }
    }
}

@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.world_view {
    @scope (.world-view) {
        :scope {
            display: block;
            inline-size: 100%;
            block-size: auto;
            aspect-ratio: 1;
            background: var(--surface-1);
        }
        polyline {
            fill: none;
            stroke: var(--gold);
            stroke-width: var(--stroke);
            stroke-linejoin: round;
            stroke-linecap: round;
        }
        polyline[data-sailed] {
            stroke-dasharray: calc(2 * var(--stroke)) calc(2 * var(--stroke));
        }
    }
}

@layer widgets.breadcrumbs {
    @scope (.breadcrumbs) {
        :scope {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-tight);
            font-size: var(--text-small);
        }
        > * + *::before {
            content: "/";
            margin-inline-end: var(--space-tight);
            color: var(--ink-quiet);
        }
    }
}

@layer widgets.metric_row {
    @scope (.metric-row) {
        :scope {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: var(--space-open) var(--space);
        }
        > .metric:not(:nth-child(3n + 1 of :not(.with-phone-hidden))) {
            --metric-indent: var(--space);
            --metric-rule: 1px solid var(--surface-4);
        }
        @media (max-width: 34.99rem) {
            > .with-phone-hidden { display: none; }
        }
        @media (min-width: 35rem) {
            :scope { column-gap: var(--space-open); }
            :scope:not(:has(> :nth-child(5))) {
                grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
            }
            :scope:not(:has(> :nth-child(5))) > .metric + .metric,
            :scope:has(> :nth-child(5)) > .metric:not(:nth-child(3n + 1)) {
                --metric-indent: var(--space-open);
                --metric-rule: 1px solid var(--surface-4);
            }
        }
        @media (min-width: 60rem) {
            :scope { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
            > .metric + .metric {
                --metric-indent: var(--space-open);
                --metric-rule: 1px solid var(--surface-4);
            }
        }
    }
}

@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 widgets.tool_card {
    @scope (.tool-card) {
        :scope {
            position: relative;
            display: grid;
            grid-template-areas:
                "icon title act"
                "icon text  act";
            grid-template-columns: auto 1fr auto;
            align-items: center;
            column-gap: 0.875rem;
            row-gap: 0.25rem;
            padding: 0.875rem 1rem;
            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));
        }
        .game-icon { grid-area: icon; --game-icon-width: 2rem; }
        .heading   { grid-area: title; }
        .prose {
            grid-area: text;
            --prose-size: 0.90625rem;
            --prose-leading: 1.6;
            --prose-ink: oklch(65% 0.008 var(--hue-surface));
            --prose-max: none;
        }
        .prose:nth-of-type(2) { --prose-display: none; }
        .heading {
            --heading-size: var(--text-label);
            --heading-case: uppercase;
        }
        :scope.with-long-title > .heading { --heading-case: none; }
        .link {
            grid-area: act;
            justify-self: end;
            --link-face: ui-monospace, monospace;
            --link-size: 0.6875rem;
            --link-tracking: 0.1em;
            --link-case: uppercase;
        }
        .link { --link-size: 0; --link-chevron-size: 1rem; --link-chevron-gap: 0; }
        [data-state="soon"] { color: var(--ink-quiet); cursor: default; }
        :scope:has(.link:where(:hover, :focus-visible)) {
            background: color-mix(in oklab, var(--surface-4) 94%, var(--link));
            box-shadow:
                inset  2px  2px 0 oklch(12% 0.010 var(--hue-surface)),
                inset -2px -2px 0 oklch(33% 0.014 var(--hue-surface));
        }
        :scope {
            transition: background 90ms ease-out;
        }
        @media (prefers-reduced-motion: reduce) {
            :scope { transition: none; }
        }
        :scope:has(> .world-view) {
            container-type: inline-size;
            grid-template-areas:
                "icon"
                "title"
                "text"
                "act";
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: auto auto auto 1fr;
            align-items: start;
            > .world-view { grid-area: icon; }
            > .heading {
                --heading-size: min(var(--text-head), 8.5cqi);
                --heading-case: none;
            }
            > .link {
                justify-self: start;
                margin-block-start: auto;
                --link-size: var(--text-micro);
                --link-chevron-size: initial;
                --link-chevron-gap: initial;
            }
        }
        @media (min-width: 60rem) {
            :scope {
                grid-template-areas:
                    "icon"
                    "title"
                    "text"
                    "act";
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto 1fr;
                align-items: start;
                gap: 1rem;
                padding: 1.625rem;
            }
            .game-icon { --game-icon-width: 3rem; }
            .prose:nth-of-type(1) { --prose-display: none; }
            .prose:nth-of-type(2) { --prose-display: block; }
            .link {
                justify-self: start;
                margin-block-start: auto;
                --link-size: var(--text-micro);
                --link-chevron-size: initial;
                --link-chevron-gap: initial;
            }
        }
    }
}

@layer slices.slice_gold_seeds {
    @scope (.gold-seeds) {
        :scope {
            row-gap: var(--space-open);
            padding-block: var(--space-open);
        }
        > :first-child:not(h2) { margin-block-start: calc(2.5rem - var(--space-open)); }
        > .prose {
            --prose-max: 68ch;
        }
        ul {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
            gap: var(--space-open);
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li {
            display: grid;
        }
        @media (max-width: 34.99rem) {
            > h2 ~ ul > li:nth-child(n + 3) { display: none; }
        }
    }
}

@layer slices.slice_grade_cards {
    @scope (.grade-cards) {
        :scope {
            row-gap: var(--space);
            padding-block: var(--space-open);
        }
        > :first-child:not(h2) { margin-block-start: calc(2.5rem - var(--space-open)); }
        > .prose {
            --prose-max: 68ch;
            margin: 0;
            --prose-ink: var(--ink-quiet);
        }
        > .link { justify-self: start; }
        .method {
            font-size: var(--text-small);
            summary {
                cursor: pointer;
                inline-size: fit-content;
                color: var(--link);
            }
            .prose {
                --prose-max: 68ch;
                margin: var(--space-close) 0 0;
                --prose-ink: var(--ink-quiet);
            }
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .table {
            container-type: inline-size;
            display: grid;
            gap: var(--space);
            margin-block-start: var(--space-open);
        }
        .cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-open);
            li { display: grid; }
        }
        @container (min-width: 30rem) {
            .cards { grid-template-columns: repeat(2, 1fr); }
        }
        @container (min-width: 46rem) {
            .cards { grid-template-columns: repeat(3, 1fr); }
        }
        .bars {
            --bar-note-size: var(--text-small);
            --bar-note-basis: 100%;
            --bar-ratio: auto;
            container-type: inline-size;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-close);
            margin-block-start: var(--space);
        }
        @container (min-width: 35rem) {
            .bars > li {
                --bar-note-size: var(--scale-base);
                --bar-note-basis: auto;
                --bar-ratio: 4717 / 646;
            }
        }
    }
}

@layer slices.slice_headlines {
    @scope (.headlines) {
        :scope {
            row-gap: 1.25rem;
            padding-block: var(--space-open);
        }
        @media (min-width: 60rem) {
            :scope {
                grid-template-columns:
                    [full-start] var(--edge)
                    [content-start] minmax(0, 1fr) 1.25rem minmax(0, 1fr)
                    [content-end] var(--edge)
                    [full-end];
            }
            > .story:first-child { grid-column: 2; }
            > .story:nth-child(2) { grid-column: 4; }
        }
        .story {
            position: relative;
            display: grid;
            grid-template-areas:
                "icon mark"
                "icon title"
                "text text"
                "act  act";
            grid-template-columns: auto minmax(0, 1fr);
            grid-template-rows: auto auto auto 1fr;
            align-items: start;
            gap: 0.5rem 1rem;
            padding: 1.625rem;
            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));
            transition: background 90ms ease-out;
        }
        .game-icon { grid-area: icon; --game-icon-width: 3rem; }
        .chip { grid-area: mark; }
        .heading {
            grid-area: title;
            --heading-face: var(--face-text);
            --heading-weight: 700;
            --heading-leading: 1.2;
        }
        .prose { grid-area: text; --prose-max: none; }
        .link {
            grid-area: act;
            align-self: end;
            --link-face: ui-monospace, monospace;
            --link-size: var(--text-micro);
            --link-tracking: 0.1em;
            --link-case: uppercase;
        }
        .story:has(.link:where(:hover, :focus-visible)) {
            background: color-mix(in oklab, var(--surface-4) 94%, var(--link));
            box-shadow:
                inset  2px  2px 0 oklch(12% 0.010 var(--hue-surface)),
                inset -2px -2px 0 oklch(33% 0.014 var(--hue-surface));
        }
        @media (prefers-reduced-motion: reduce) {
            .story { transition: none; }
        }
        @media (min-width: 60rem) {
            .game-icon { --game-icon-width: 4rem; }
        }
    }
}

@layer slices.slice_intro {
    @scope (.intro) {
        :scope {
            padding-block: 3rem 2.75rem;
            row-gap: var(--space-close);
            align-items: end;
            background:
                var(--interlace),
                linear-gradient(to right,
                    oklch(12% 0.01 260 / 0.94) 0%,
                    oklch(12% 0.01 260 / 0.86) 38%,
                    oklch(12% 0.01 260 / 0.52) 72%,
                    oklch(12% 0.01 260 / 0.38) 100%),
                image-set(url("/press/skepp-860.avif") type("image/avif"),
                          url("/press/skepp-860.webp") type("image/webp")),
                var(--surface-2);
            background-size: var(--interlace-size), auto, cover, auto;
            background-position: center, center, right center, center;
            background-repeat: repeat, no-repeat, no-repeat, repeat;
        }
        .seed-form { margin-block-start: var(--space-open); }
        @media (min-width: 35rem) {
            :scope {
                background-image:
                    var(--interlace),
                    linear-gradient(to right,
                        oklch(12% 0.01 260 / 0.94) 0%,
                        oklch(12% 0.01 260 / 0.86) 38%,
                        oklch(12% 0.01 260 / 0.52) 72%,
                        oklch(12% 0.01 260 / 0.38) 100%),
                    image-set(url("/press/skepp-1280.avif") type("image/avif"),
                              url("/press/skepp-1280.webp") type("image/webp"));
            }
        }
        @media (min-width: 60rem) {
            :scope {
                background-image:
                    var(--interlace),
                    linear-gradient(to right,
                        oklch(12% 0.01 260 / 0.94) 0%,
                        oklch(12% 0.01 260 / 0.86) 38%,
                        oklch(12% 0.01 260 / 0.52) 72%,
                        oklch(12% 0.01 260 / 0.38) 100%),
                    image-set(url("/press/skepp-1920.avif") type("image/avif"),
                              url("/press/skepp-1920.webp") type("image/webp"));
                grid-template-areas:
                    "chip   ."
                    "head   ."
                    "text   seed";
                grid-template-columns:
                    [full-start] var(--edge)
                    [content-start] minmax(0, 1fr) 4.375rem 26.25rem
                    [content-end] var(--edge)
                    [full-end];
            }
            > .chip      { grid-column: 2 / 5; }
            > .heading   { grid-column: 2 / 5; }
            > .prose     { grid-column: 2; }
            > .seed-form { grid-column: 4; margin-block-start: 0; }
            > .chip, > .heading { align-self: start; }
        }
    }
}

@layer slices.slice_metrics {
    @scope (.metrics) {
        :scope {
            padding-block: var(--space-open);
        }
        .metric {
            --metric-face: "Press Start 2P", monospace;
            --metric-size: min(var(--text-title), calc(5.2vw - 0.375rem));
        }
        @media (min-width: 35rem) {
            .metric { --metric-size: min(var(--text-title), calc(4vw - 0.75rem)); }
        }
    }
}

@layer slices.slice_news {
    @scope (.news) {
        :scope {
            padding-block: var(--space-open);
        }
        .columns {
            grid-column: content;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
            gap: var(--space-wide);
        }
        .column {
            display: grid;
            gap: var(--space-close);
            align-content: start;
        }
        .list {
            display: grid;
            gap: var(--space-close);
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .list > li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: var(--space-snug);
            align-items: baseline;
        }
        .date {
            font-family: ui-monospace, monospace;
            font-size: var(--text-small);
            color: var(--ink-quiet);
            white-space: nowrap;
        }
        .word {
            max-inline-size: 68ch;
            color: var(--ink);
        }
        .empty {
            margin: 0;
            color: var(--ink-quiet);
        }
    }
}

@layer slices.slice_status {
    @scope (.status) {
        :scope {
            padding-block: var(--space-open);
        }
        .head {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: space-between;
            gap: var(--space-close);
        }
        .title {
            display: flex;
            flex-direction: column;
            gap: var(--space-hair);
        }
        .as-of {
            margin: 0;
            color: var(--ink-quiet);
            font-size: var(--text-micro);
        }
        .players {
            display: flex;
            align-items: baseline;
            gap: var(--space-tight);
            margin: 0;
        }
        .number {
            color: var(--link);
            font-size: var(--text-large);
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }
        .players .word {
            color: var(--ink-quiet);
            font-size: var(--text-small);
        }
        .alt {
            margin-block: var(--space-close) 0;
            color: var(--ink-quiet);
            font-size: var(--text-small);
        }
        .services {
            margin-block: var(--space-close) 0;
        }
        .line {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: var(--space-close);
            padding-block: var(--space-tight);
        }
        .line + .line {
            border-block-start: 1px solid var(--surface-4);
        }
        .name {
            margin: 0;
            color: var(--ink);
        }
        .state {
            display: flex;
            align-items: center;
            gap: var(--space-tight);
            margin: 0;
        }
        .state .word {
            color: var(--ink-quiet);
            font-size: var(--text-small);
        }
        .light {
            inline-size: 0.625rem;
            block-size: 0.625rem;
            border-radius: 50%;
            background: var(--light, var(--ink-quiet));
            flex: none;
        }
        [data-state="green"]  { --light: var(--link); }
        [data-state="yellow"]   { --light: var(--gold); }
        [data-state="red"]    { --light: oklch(from var(--danger) 0.50 c h); }
        [data-state="yellow"]  .word { color: var(--gold); }
        [data-state="red"]   .word { color: var(--danger); }
    }
}

@layer slices.slice_tips {
    @scope (.tips) {
        :scope {
            row-gap: var(--space-open);
            padding-block: var(--space-open);
        }
        > :first-child:not(h2) { margin-block-start: calc(2.5rem - var(--space-open)); }
        > .prose {
            --prose-max: 68ch;
        }
        ul {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
            gap: var(--space-open);
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li {
            display: grid;
        }
    }
}

@layer slices.slice_tools {
    @scope (.tools) {
        :scope {
            padding-block: 2.5rem;
        }
        :scope > .tool-card {
            grid-column: content;
        }
        :scope {
            row-gap: 1.25rem;
        }
        @media (min-width: 35rem) {
            :scope {
                grid-template-columns:
                    [full-start] var(--edge)
                    [content-start] minmax(0, 1fr) 1.25rem minmax(0, 1fr)
                    [content-end] var(--edge)
                    [full-end];
            }
            :scope > .tool-card { grid-column: auto; }
            :scope > .tool-card:first-child { grid-column: 2; }
            :scope > .tool-card:nth-child(2) { grid-column: 4; }
            :scope > .tool-card:nth-child(3) { grid-column: 2 / 5; }
        }
        @media (min-width: 60rem) {
            :scope {
                grid-template-columns:
                    [full-start] var(--edge)
                    [content-start] minmax(0, 1fr) 1.25rem
                                    minmax(0, 1fr) 1.25rem minmax(0, 1fr)
                    [content-end] var(--edge)
                    [full-end];
            }
            :scope > .tool-card:nth-child(2) { grid-column: 4; }
            :scope > .tool-card:nth-child(3) { grid-column: 6; }
        }
    }
}