/* Generated by `vgarun valheim cms create stylesheet` — do not change by hand. */
/* The page kind grade-cards: 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.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.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.grade_mark {
    @scope (.grade-mark) {
        :scope {
            --grade: var(--ink);
            display: inline-grid;
            place-items: center;
            min-inline-size: var(--grade-mark-min, 1.6em);
            block-size: var(--grade-mark-height, 1.6em);
            padding-inline: 0.2em;
            border: 1.5px solid var(--grade);
            border-radius: 0.2em;
            color: var(--grade);
            font-size: var(--grade-size, inherit);
            font-weight: 700;
            line-height: 1;
            text-decoration: none;
        }
        :scope[data-grade="S"] { --grade: var(--link); }
        :scope[data-grade="A"] { --grade: var(--gold); }
        :scope[data-grade="B"] { --grade: var(--brand); }
        :scope[data-grade="C"] { --grade: oklch(64% 0.21 22); }
        :scope:where(a:hover, a:focus-visible) {
            background: color-mix(in oklab, var(--grade) 12%, transparent);
        }
        :scope:where(a:focus-visible) {
            outline: 2px solid var(--link);
            outline-offset: 2px;
        }
    }
}

@layer elements.pill {
    @scope (.pill) {
        :scope {
            --pill: var(--rank-1);
            position: relative;
            display: inline-grid;
            padding-block-start: var(--space-snug);
            cursor: pointer;
        }
        :scope[data-rank="2"] { --pill: var(--rank-2); }
        :scope[data-rank="3"] { --pill: var(--rank-3); }
        :scope[data-rank="4"] { --pill: var(--rank-4); }
        input {
            appearance: none;
            position: absolute;
            inset: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }
        span {
            display: grid;
            place-items: center;
            min-inline-size: 2.4em;
            block-size: 1.6em;
            padding-inline: 0.4em;
            border: 1.5px solid var(--pill);
            border-radius: 0.2em;
            color: var(--pill);
            font-family: ui-monospace, monospace;
            font-size: var(--text-micro);
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        :scope::before {
            content: "";
            position: absolute;
            inset-block-start: 0;
            inset-inline: 0;
            margin-inline: auto;
            inline-size: 0;
            block-size: 0;
            border-inline: 0.3em solid transparent;
            border-block-start: 0.35em solid var(--gold);
            opacity: 0;
        }
        :scope:has(:checked)::before { opacity: 1; }
        input:where(:focus-visible) ~ span {
            outline: 2px solid var(--link);
            outline-offset: 2px;
        }
        :scope:hover span {
            background: color-mix(in oklab, var(--pill) 12%, transparent);
        }
    }
}

@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.dps_graph {
    @scope (.dps-graph) {
        :scope {
            container-type: inline-size;
            display: grid;
            row-gap: var(--space-close);
        }
        [data-damage="slash"]     { --tone: var(--damage-slash); }
        [data-damage="pierce"]    { --tone: var(--damage-pierce); }
        [data-damage="blunt"]     { --tone: var(--damage-blunt); }
        [data-damage="fire"]      { --tone: var(--damage-fire); }
        [data-damage="frost"]     { --tone: var(--damage-frost); }
        [data-damage="lightning"] { --tone: var(--damage-lightning); }
        [data-damage="poison"]    { --tone: var(--damage-poison); }
        [data-damage="spirit"]    { --tone: var(--damage-spirit); }
        [data-damage="damage"]    { --tone: var(--damage-damage); }
        [data-line="primary"]   { --tone: var(--gold); }
        [data-line="secondary"] { --tone: var(--ink-quiet); }
        .topline {
            display: grid;
            grid-template-columns: auto 1fr;
            grid-template-areas:
                "title at"
                "views views";
            align-items: center;
            gap: var(--space-tight) var(--space-close);
            padding-block-start: var(--space-close);
            > .heading { grid-area: title; }
            > .at { grid-area: at; }
            > .views { grid-area: views; }
            > .heading {
                margin: 0;
                --heading-ink: var(--ink-bright);
                --heading-face: var(--face-text);
                --heading-size: 0.8125rem;
                --heading-weight: 500;
                --heading-case: uppercase;
                --heading-tracking: 0.07em;
            }
        }
        @container (min-width: 26rem) {
            .topline {
                grid-template-columns: auto 1fr auto;
                grid-template-areas: "title at views";
            }
        }
        .at {
            color: var(--ink-quiet);
            font-size: var(--text-small);
            i { font-style: normal; }
        }
        .views {
            display: flex;
            gap: var(--space-tight);
            margin: 0;
            padding: 0;
            border: none;
            legend {
                position: absolute;
                inline-size: 1px;
                block-size: 1px;
                overflow: hidden;
                clip-path: inset(50%);
                white-space: nowrap;
            }
        }
        .view {
            display: grid;
            row-gap: var(--space-snug);
            margin: 0;
        }
        .reckoning {
            margin: 0;
            color: var(--ink);
            line-height: 1.6;
            b {
                color: var(--gold);
                font-size: calc(var(--scale-base) * 1.272);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
            em {
                padding-inline: var(--space-hair);
                color: var(--ink-quiet);
                font-style: normal;
            }
        }
        .portions {
            display: flex;
            block-size: var(--space-snug);
            margin: 0;
            i {
                inline-size: calc(var(--share) * 1%);
                background: var(--tone);
            }
        }
        .shares {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-tight) var(--space-open);
            margin: 0;
            padding: 0;
            list-style: none;
            color: var(--ink);
            font-size: var(--text-small);
            b {
                color: var(--ink-bright);
                font-weight: 600;
                font-variant-numeric: tabular-nums;
            }
        }
        :is(.shares li, .key i)::before {
            content: "";
            display: inline-block;
            inline-size: 0.625rem;
            block-size: 0.625rem;
            margin-inline-end: var(--space-tight);
            background: var(--tone);
        }
        .key i[data-line]::before {
            inline-size: 1rem;
            block-size: 0;
            vertical-align: middle;
            background: none;
            border-block-start: var(--space-hair) solid var(--tone);
        }
        .key i[data-line="secondary"]::before { border-block-start-style: dashed; }
        .drawing {
            display: grid;
            grid-template-columns: 2.5rem 1fr;
            grid-template-areas:
                "rise plot"
                ".    run";
            row-gap: var(--space-hair);
        }
        .canvas {
            grid-area: plot;
            position: relative;
            aspect-ratio: 5 / 2;
            border-inline-start: 1px solid var(--ink-quiet);
            border-block-end: 1px solid var(--ink-quiet);
        }
        @container (min-width: 40rem) {
            .canvas { aspect-ratio: 3 / 1; }
        }
        svg {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            overflow: visible;
            polygon {
                fill: var(--tone);
                fill-opacity: 0.7;
                stroke: none;
            }
            polyline {
                fill: none;
                stroke: var(--tone);
                stroke-width: 2.5;
                stroke-linejoin: round;
            }
            polyline[data-line="secondary"] { stroke-dasharray: 6 4; }
            .gridline {
                stroke: var(--ink-quiet);
                stroke-width: 1;
                stroke-opacity: 0.25;
            }
        }
        .mark {
            position: absolute;
            inset-inline-start: calc(var(--x) * 1%);
            inset-block-end: calc(var(--y) * 1%);
            padding-inline-start: var(--space-tight);
            padding-block-end: var(--space-hair);
            color: var(--ink-bright);
            font-size: var(--text-small);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            b { color: var(--gold); font-weight: 600; }
        }
        :is(.rise, .run) {
            position: relative;
            color: var(--ink-quiet);
            font-size: var(--text-small);
            font-variant-numeric: tabular-nums;
            span { position: absolute; white-space: nowrap; }
        }
        .rise {
            grid-area: rise;
            span {
                inset-block-start: calc(var(--at) * 1%);
                inset-inline-end: var(--space-tight);
                translate: 0 -50%;
            }
        }
        .run {
            grid-area: run;
            block-size: 1.4em;
            span {
                inset-inline-start: calc(var(--at) * 1%);
                translate: -50% 0;
            }
            span:first-child { translate: 0 0; }
        }
        figcaption {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--space-tight) var(--space-close);
            color: var(--ink-quiet);
            font-size: var(--text-small);
        }
        .key {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-tight) var(--space-close);
            color: var(--ink);
            i { font-style: normal; }
            b { color: var(--ink-bright); font-weight: 600; font-variant-numeric: tabular-nums; }
        }
        .stage {
            display: grid;
            row-gap: var(--space-close);
            > .prose {
                --prose-max: 68ch;
                margin: 0;
                --prose-ink: var(--ink-quiet);
                --prose-size: var(--text-small);
            }
        }
        .numbers {
            overflow-x: auto;
            color: var(--ink);
            font-size: var(--text-small);
            summary {
                cursor: pointer;
                color: var(--link);
            }
            table {
                margin-block-start: var(--space-close);
                border-collapse: collapse;
                font-variant-numeric: tabular-nums;
            }
            :is(th, td) {
                padding: var(--space-hair) var(--space-close);
                border-block-end: 1px solid oklch(from var(--ink-quiet) l c h / 0.30);
                text-align: start;
                white-space: nowrap;
            }
            th { color: var(--ink-bright); font-weight: 500; }
        }
        :scope:has(.views input[value="composition"]:checked) .view:not(.with-composition),
        :scope:has(.views input[value="combo"]:checked) .view:not(.with-combo),
        :scope:has(.views input[value="rhythm"]:checked) .view:not(.with-rhythm) {
            display: none;
        }
    }
}

@layer widgets.item_dossier {
    @scope (.item-dossier) {
        :scope {
            padding: var(--item-dossier-padding);
            &:not(:has([data-rank] > :checked)) [data-level]:not([data-level="1"]),
            &:has([data-rank="1"] > :checked) [data-level]:not([data-level="1"]),
            &:has([data-rank="2"] > :checked) [data-level]:not([data-level="2"]),
            &:has([data-rank="3"] > :checked) [data-level]:not([data-level="3"]),
            &:has([data-rank="4"] > :checked) [data-level]:not([data-level="4"]) {
                display: none;
            }
            &:not(:has([data-rank] > :checked)) [data-from],
            &:has([data-rank="1"] > :checked) [data-from],
            &:has([data-rank="2"] > :checked) [data-from="3"],
            &:has([data-rank="2"] > :checked) [data-from="4"],
            &:has([data-rank="3"] > :checked) [data-from="4"] {
                display: none;
            }
            &:has([data-rank="2"] > :checked) [data-max="2"],
            &:has([data-rank="3"] > :checked) [data-max="3"],
            &:has([data-rank="4"] > :checked) [data-max="4"] {
                display: none;
            }
        }
        :scope .card {
            --sheet-line: oklch(from var(--ink-quiet) l c h / 0.20);
            display: grid;
            font-size: var(--text-small);
            gap: var(--space-close);
            padding-block-end: var(--space-close);
            border-block-end: 1px solid var(--sheet-line);
            &:has(> .kind:only-child) {
                padding-block-end: 0;
                border-block-end: none;
            }
        }
        :scope .kind {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-close);
            margin: 0;
            padding-block: var(--space-close);
            border-block-end: 1px solid var(--sheet-line);
            color: var(--link);
        }
        :scope .hero {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            column-gap: calc(var(--space-close) * 2);
            margin: 0;
            color: var(--ink);
            b {
                color: var(--gold);
                font-size: calc(var(--scale-base) * 1.618);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
        }
        :scope .grades-line {
            --grade-size: var(--text-small);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-tight) var(--space-close);
            margin: 0;
            color: var(--ink);
            font-size: var(--text-small);
            > span:first-child { color: var(--gold); }
        }
        :scope .figure-tables {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr) 50%;
        }
        :scope .figures {
            display: grid;
            grid-row: span var(--rows, 1);
            grid-template-rows: subgrid;
            grid-template-columns: max-content minmax(0, 1fr);
            align-items: start;
            column-gap: var(--space-snug);
            line-height: 1.3;
            color: var(--ink);
            b {
                color: var(--ink-bright);
                font-size: var(--text);
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }
            span {
                hyphens: auto;
                overflow-wrap: break-word;
            }
            span::before {
                content: "\200B";
                font-size: var(--text);
            }
            b.with-cost { color: var(--brand); }
            b.with-gold { color: var(--gold); }
            b.with-gold + span { color: var(--gold); }
            &:first-child:not([data-span]) {
                grid-column: 1 / 3;
                grid-template-columns: subgrid;
            }
            &:nth-child(2):not([data-span]) {
                grid-column: 3;
                padding-inline-start: var(--space-close);
            }
            &[data-span="wide"] {
                grid-column: 1 / -1;
                grid-row: auto;
                grid-template-rows: none;
                grid-template-columns: subgrid;
                > span { grid-column: 2 / -1; }
            }
        }
        :scope .caption {
            margin: 0;
            color: var(--link);
        }
        :scope .foot {
            margin: 0;
            color: var(--ink-bright);
            b {
                color: var(--link);
                font-weight: 700;
            }
            b.with-cost { color: var(--brand); }
        }
        :scope .origin-rows {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: baseline;
            column-gap: var(--space-close);
            padding-block-end: 0.5rem;
            font-size: 0.8125rem;
            line-height: 1.45;
            > div {
                display: grid;
                row-gap: 0.3125rem;
            }
        }
        :scope .origin-region {
            color: var(--ink);
            white-space: nowrap;
        }
        :scope .hero,
        :scope .figures,
        :scope .foot {
            b i { font-style: normal; }
        }
        :scope .origin {
            margin: 0;
            color: var(--ink);
            span:first-child::after { content: ":"; }
            b { font-weight: 400; }
            em { font-style: normal; }
        }
        :scope > .stat[data-kind="id"] {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 0.5rem;
            margin: 1.4em 0 0;
            margin-block-start: 1lh;
            padding-block: var(--space-close);
            border-block-start: 1px solid oklch(from var(--ink-quiet) l c h / 0.20);
            color: var(--ink);
            b {
                margin-inline-start: auto;
                color: var(--ink-bright);
                font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                font-size: var(--text-small);
                font-weight: 400;
                user-select: all;
                text-align: end;
                word-break: break-word;
            }
        }
        :scope:not(:has(> .side > *)) > .stat[data-kind="id"] {
            border-block-start: none;
        }
        :scope[data-mode="page"] > .stat[data-kind="id"] {
            border-block: 1px solid var(--gold);
        }
        .section [data-kind="checked"] {
            color: var(--gold);
        }
        .section + .section {
            border-block-start: 1px solid oklch(from var(--ink-quiet) l c h / 0.20);
        }
        .head {
            display: flex;
            align-items: baseline;
            gap: 0.5rem;
            margin: 0;
            padding-block: 0.75rem 0.375rem;
        }
        .title {
            color: var(--ink-bright);
            font-size: 0.8125rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }
        .rows {
            --gap: 1.25rem;
            display: grid;
            grid-template-columns: max-content 1fr;
            column-gap: var(--gap);
            row-gap: 0.3125rem;
            padding-block-end: 0.5rem;
            font-size: 0.8125rem;
            line-height: 1.45;
            > * { grid-column: 1 / -1; }
            .text + :not(.text),
            :not(.text) + .text {
                padding-block-start: 0.5rem;
            }
        }
        .text {
            margin: 0;
            color: var(--ink);
            b { color: var(--gold); font-weight: 500; }
            b[data-kind="item"] { color: var(--ink-bright); }
        }
        .cost {
            display: grid;
            grid-template-columns: subgrid;
            align-items: baseline;
            margin: 0;
            color: var(--ink);
            > span:first-child::after { content: ":"; }
            > span:first-child i { font-style: normal; }
        }
        .cost + .cost { padding-block-start: 0.5rem; }
        .parts {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.125rem var(--gap);
            > i {
                color: var(--ink);
                font-style: normal;
                font-size: 0.75rem;
            }
        }
        .part {
            min-inline-size: 0;
            .game-icon {
                --game-icon-display: inline-block;
                --game-icon-width: 1.25em;
                --game-icon-height: 1.25em;
                --game-icon-valign: -0.3em;
                --game-icon-rendering: auto;
            }
            b {
                color: var(--ink-bright);
                font-weight: 500;
                font-variant-numeric: tabular-nums;
            }
            i { font-style: normal; }
        }
        .planner {
            margin: 0.875rem 0 0;
            .button { --button-width: 100%; }
        }
        [data-kind="crafting"] > summary {
            cursor: pointer;
            list-style: none;
            user-select: none;
        }
        [data-kind="crafting"] > summary::-webkit-details-marker { display: none; }
        [data-kind="crafting"] > summary:where(:focus-visible) {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }
        .chevron {
            align-self: center;
            margin-inline: auto var(--space-tight);
            inline-size: 0.5rem;
            block-size: 0.5rem;
            border-inline-end: 2px solid var(--gold);
            border-block-end: 2px solid var(--gold);
            transform: translateY(-25%) rotate(45deg);
            transition: transform 90ms steps(3);
        }
        [data-kind="crafting"][open] .chevron {
            transform: translateY(25%) rotate(225deg);
        }
        @media (prefers-reduced-motion: reduce) {
            .chevron { transition: none; }
        }
        @container (min-width: 45rem) {
            :scope[data-mode="page"] {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-template-rows: auto auto 1fr;
                grid-template-areas: "card side" "dps side" "id side";
                column-gap: 1.5rem;
                > .card { grid-area: card; }
                > .stat { grid-area: id; align-self: start; }
                > .dps-graph { grid-area: dps; }
                &:not(:has(> .dps-graph)) > .card {
                    padding-block-end: 0;
                    border-block-end: none;
                }
                > .side {
                    grid-area: side;
                    padding-inline-start: 1.5rem;
                    border-inline-start: 1px solid var(--gold);
                }
            }
        }
    }
}

@layer widgets.item_sheet {
    @scope (.item-sheet) {
        :scope {
            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);
            opacity: 0;
            transition-property: opacity, overlay, display;
            transition-duration: 500ms;
            transition-timing-function: ease;
            transition-behavior: allow-discrete;
        }
        :scope:popover-open { opacity: 1; }
        :scope:not(:popover-open) { pointer-events: none; }
        @starting-style {
            :scope:popover-open { opacity: 0; }
        }
        :scope::backdrop {
            background: var(--sheet-scrim);
            opacity: 0;
            mask-image: linear-gradient(oklch(0% 0 0) 0 0), linear-gradient(oklch(0% 0 0) 0 0);
            mask-repeat: no-repeat, no-repeat;
            mask-position: 0 0, var(--hole-x, -9999px) var(--hole-y, -9999px);
            mask-size: 100% 100%, var(--hole-width, 0) var(--hole-height, 0);
            mask-composite: exclude;
            transition-property: opacity, overlay, display;
            transition-duration: 500ms;
            transition-timing-function: ease;
            transition-behavior: allow-discrete;
        }
        :scope:popover-open::backdrop { opacity: 1; }
        @starting-style {
            :scope:popover-open::backdrop { opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            :scope,
            :scope::backdrop {
                transition-duration: 1ms;
            }
        }
        :scope > header {
            cursor: grab;
            touch-action: none;
            user-select: none;
            position: sticky;
            inset-block-start: 0;
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem calc(var(--space-open) * 2 + 0.75rem) 0.875rem 1rem;
            background: var(--surface-4);
            .game-icon {
                grid-area: 1 / 1;
                --game-icon-width: 64px;
                --game-icon-height: 64px;
            }
            .level {
                grid-area: 1 / 1;
                justify-self: end;
                align-self: start;
                padding: 0.1em 0.25em;
                background: var(--surface-4);
                color: var(--ink-bright);
                font-size: var(--text-small);
                font-style: normal;
                font-weight: 500;
                line-height: 1;
                font-variant-numeric: tabular-nums;
            }
            .level::after { content: var(--level, "1"); }
            b {
                grid-area: 1 / 2;
                color: var(--rank, var(--ink-bright));
                font-size: 1.0625rem;
                font-weight: 500;
                line-height: 1.25;
            }
        }
        :scope {
            &:has([data-rank="2"] > :checked) { --rank: var(--rank-2); --level: "2"; }
            &:has([data-rank="3"] > :checked) { --rank: var(--rank-3); --level: "3"; }
            &:has([data-rank="4"] > :checked) { --rank: var(--rank-4); --level: "4"; }
        }
        :scope .icon-button {
            --icon-button-cursor: pointer;
            position: absolute;
            inset-block-start: 0.25rem;
            inset-inline-end: 0.25rem;
            z-index: 1;
        }
        :scope > .item-dossier {
            --item-dossier-padding: 0 1rem 1rem;
        }
        :scope header a {
            color: inherit;
            text-decoration: none;
        }
        :scope header a:where(:hover, :focus-visible) {
            text-decoration: underline;
            text-underline-offset: 0.1875rem;
        }
    }
}

@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_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_grade_graph {
    @scope (.grade-graph) {
        :scope {
            container-type: inline-size;
            row-gap: var(--space);
            padding-block: var(--space-open);
            > .prose {
                --prose-max: 68ch;
                margin: 0;
                --prose-ink: var(--ink-quiet);
            }
        }
        [data-weapon="unarmed"]   { --line: var(--chart-1); }
        [data-weapon="knives"]    { --line: var(--chart-2); }
        [data-weapon="swords"]    { --line: var(--chart-3); }
        [data-weapon="axes"]      { --line: var(--chart-4); }
        [data-weapon="clubs"]     { --line: var(--chart-5); }
        [data-weapon="polearms"]  { --line: var(--chart-6); }
        [data-weapon="spears"]    { --line: var(--chart-7); }
        [data-weapon="bows"]      { --line: var(--chart-8); }
        [data-weapon="crossbows"] { --line: var(--chart-9); }
        [data-weapon="bombs"]     { --line: var(--chart-10); }
        [data-weapon="elemental"] { --line: var(--chart-11); }
        .frame {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas:
                "levels toggle"
                "chart  chart";
            align-items: center;
            gap: var(--space) var(--space-open);
            > .icon-button { grid-area: toggle; }
        }
        .levels  { grid-area: levels; }
        .chart   { grid-area: chart; }
        .weapons:where([popover]) {
            inset: 0 0 0 auto;
            block-size: auto;
            inline-size: max-content;
            max-inline-size: 85%;
            margin: 0;
            padding: var(--space-open);
            overflow-y: auto;
            background: var(--surface-4);
            color: var(--ink);
            box-shadow:
                inset  2px  2px 0 oklch(33% 0.014 var(--hue-surface)),
                inset -2px -2px 0 oklch(12% 0.010 var(--hue-surface));
            translate: 100% 0;
            transition-property: translate, overlay, display;
            transition-duration: 250ms;
            transition-timing-function: ease-out;
            transition-behavior: allow-discrete;
            > .icon-button {
                position: absolute;
                inset-block-start: var(--space-close);
                inset-inline-end: var(--space-close);
            }
        }
        .weapons:popover-open {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: start;
            translate: 0 0;
            legend {
                float: inline-start;
                margin-block-end: var(--space-tight);
            }
            li {
                border-block-end: 0;
                border-inline-start: 0.1875rem solid var(--line);
                padding-inline-start: var(--space-tight);
            }
        }
        @starting-style {
            .weapons:popover-open { translate: 100% 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .weapons:where([popover]) { transition-duration: 1ms; }
        }
        .levels { display: flex; }
        fieldset {
            flex-wrap: wrap;
            align-items: center;
            gap: var(--space-tight) var(--space-close);
            margin: 0;
            padding: 0;
            border: 0;
            min-inline-size: 0;
            legend {
                float: inline-start;
                margin-inline-end: var(--space-tight);
                padding: 0;
                color: var(--ink-quiet);
            }
            ul {
                display: contents;
                list-style: none;
            }
        }
        @container (min-width: 60rem) {
            .frame {
                grid-template-areas:
                    "levels weapons"
                    "chart  weapons";
                grid-template-rows: auto 1fr;
                align-items: start;
                > .icon-button { --icon-button-display: none; }
            }
            .weapons:where([popover]) {
                grid-area: weapons;
                display: flex;
                position: static;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: start;
                inline-size: auto;
                max-inline-size: none;
                padding: 0;
                overflow: visible;
                background: none;
                box-shadow: none;
                translate: none;
                transition: none;
                > .icon-button { --icon-button-display: none; }
                legend {
                    float: none;
                    margin-block-end: var(--space-tight);
                }
                li {
                    border-inline-start: 0.1875rem solid var(--line);
                    padding-inline-start: var(--space-tight);
                }
            }
        }
        .chart {
            display: grid;
            grid-template-columns: 2.5rem 1fr;
            grid-template-areas:
                "ticks plot"
                ".     regions";
            row-gap: var(--space-tight);
            margin: 0;
        }
        .plot {
            grid-area: plot;
            position: relative;
            aspect-ratio: 4 / 3;
            border-inline-start: 1px solid var(--ink-quiet);
            border-block-end: 1px solid var(--ink-quiet);
        }
        @container (min-width: 40rem) {
            .plot { aspect-ratio: 3 / 1; }
        }
        svg {
            position: absolute;
            inset: 0;
            inline-size: 100%;
            block-size: 100%;
            overflow: visible;
            polyline {
                fill: none;
                stroke: var(--line);
                stroke-width: 2.5;
                stroke-linejoin: round;
            }
            polyline[data-upper] { stroke-dasharray: 6 4; }
            polygon {
                fill: var(--line);
                fill-opacity: 0.2;
                stroke: none;
            }
            .grid {
                stroke: var(--ink-quiet);
                stroke-width: 1;
                stroke-opacity: 0.25;
            }
        }
        .ticks {
            grid-area: ticks;
            position: relative;
            color: var(--ink-quiet);
            font-size: var(--text-small);
            font-variant-numeric: tabular-nums;
            span {
                position: absolute;
                inset-block-start: calc(var(--y) * 1%);
                inset-inline-end: var(--space-tight);
                translate: 0 -50%;
            }
        }
        .regions {
            grid-area: regions;
            display: grid;
            grid-template-columns: repeat(8, minmax(0, 1fr));
            color: var(--ink);
            font-size: var(--text-micro);
            text-align: center;
            overflow-wrap: anywhere;
            hyphens: auto;
        }
        @container (min-width: 40rem) {
            .regions { font-size: var(--text-small); }
        }
        .point {
            position: absolute;
            inset-inline-start: calc(var(--x) * 1%);
            inset-block-start: calc(var(--y) * 1%);
            translate: -50% -50%;
            inline-size: 0.85rem;
            block-size: 0.85rem;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: none;
            cursor: pointer;
            &::before {
                content: "";
                position: absolute;
                inset: 0;
                border: 2px solid var(--surface-0);
                border-radius: 50%;
                background: var(--line);
            }
        }
        .point:where(:hover, :focus-visible) {
            z-index: 2;
            outline: 2px solid var(--line);
            outline-offset: 2px;
        }
        .graph-tip {
            position: absolute;
            inset-block-end: calc(100% + var(--space-snug));
            inset-inline-start: 50%;
            translate: calc(var(--x) * -1%) 0;
            display: none;
            inline-size: max-content;
            max-inline-size: calc(100cqi - 3rem);
            grid-template-columns: auto auto;
            column-gap: var(--space-tight);
            align-items: center;
            padding: var(--space-tight) var(--space-close);
            border: 2px solid var(--gold);
            background: var(--surface-4);
            box-shadow: var(--sheet-shadow);
            color: var(--ink);
            font-size: var(--text-small);
            text-align: start;
            .game-icon {
                grid-column: 1;
                grid-row: 1 / span 5;
                --game-icon-width: 2.5rem;
                --game-icon-height: 2.5rem;
            }
            > :is(b, span) { grid-column: 2; }
            b {
                color: var(--ink-bright);
                font-weight: 500;
            }
            > span:is(:nth-of-type(2), :nth-of-type(3)) { color: var(--ink-bright); }
            > span:nth-of-type(4) { max-inline-size: 30ch; }
        }
        .point:where(:hover, :focus-visible) > .graph-tip {
            display: grid;
        }
        .blows {
            display: grid;
            row-gap: var(--space);
            margin-block-start: var(--space-open);
            > .prose {
                --prose-max: 68ch;
                margin: 0;
                --prose-ink: var(--ink-quiet);
            }
        }
        .blow-table {
            overflow-x: auto;
            font-size: var(--text-small);
            table {
                border-collapse: collapse;
                font-variant-numeric: tabular-nums;
            }
            caption {
                text-align: start;
                color: var(--ink-quiet);
                padding-block-end: var(--space-tight);
            }
            :is(th, td) {
                padding: var(--space-tight) var(--space-close);
                border-block-end: 1px solid color-mix(in oklab, var(--ink-quiet) 30%, transparent);
                text-align: start;
                vertical-align: top;
                white-space: nowrap;
            }
            thead th { color: var(--ink-quiet); font-weight: 500; }
            tbody th {
                border-inline-start: 0.1875rem solid var(--line);
                color: var(--ink-bright);
                font-weight: 500;
            }
            td {
                color: var(--ink-quiet);
                white-space: normal;
                > span { display: block; color: var(--ink); }
                > b {
                    color: var(--ink-bright);
                    font-weight: 500;
                    white-space: nowrap;
                }
            }
        }
        .data {
            overflow-x: auto;
            color: var(--ink);
            font-size: var(--text-small);
            summary {
                cursor: pointer;
                color: var(--link);
            }
            table {
                margin-block-start: var(--space-close);
                border-collapse: collapse;
                font-variant-numeric: tabular-nums;
            }
            caption {
                text-align: start;
                color: var(--ink-quiet);
                padding-block-end: var(--space-tight);
            }
            :is(th, td) {
                padding: var(--space-hair) var(--space-close);
                border-block-end: 1px solid color-mix(in oklab, var(--ink-quiet) 30%, transparent);
                text-align: start;
                white-space: nowrap;
            }
            th { color: var(--ink-bright); font-weight: 500; }
        }
        :scope:has(.levels input[value="1"]:checked) :is(.plot, .data, .blows) [data-level]:not([data-level="1"]),
        :scope:has(.levels input[value="2"]:checked) :is(.plot, .data, .blows) [data-level]:not([data-level="2"]),
        :scope:has(.levels input[value="3"]:checked) :is(.plot, .data, .blows) [data-level]:not([data-level="3"]),
        :scope:has(.levels input[value="4"]:checked) :is(.plot, .data, .blows) [data-level]:not([data-level="4"]) {
            display: none;
        }
        :scope:has(.weapons input[value="swords"]:not(:checked)) .plot [data-weapon="swords"],
        :scope:has(.weapons input[value="knives"]:not(:checked)) .plot [data-weapon="knives"],
        :scope:has(.weapons input[value="clubs"]:not(:checked)) .plot [data-weapon="clubs"],
        :scope:has(.weapons input[value="polearms"]:not(:checked)) .plot [data-weapon="polearms"],
        :scope:has(.weapons input[value="spears"]:not(:checked)) .plot [data-weapon="spears"],
        :scope:has(.weapons input[value="axes"]:not(:checked)) .plot [data-weapon="axes"],
        :scope:has(.weapons input[value="unarmed"]:not(:checked)) .plot [data-weapon="unarmed"],
        :scope:has(.weapons input[value="bows"]:not(:checked)) .plot [data-weapon="bows"],
        :scope:has(.weapons input[value="crossbows"]:not(:checked)) .plot [data-weapon="crossbows"],
        :scope:has(.weapons input[value="elemental"]:not(:checked)) .plot [data-weapon="elemental"],
        :scope:has(.weapons input[value="bombs"]:not(:checked)) .plot [data-weapon="bombs"] {
            display: none;
        }
        @media (prefers-reduced-motion: no-preference) {
            .point::before { transition: scale 120ms ease-out; }
            .point:where(:hover, :focus-visible)::before { scale: 1.3; }
        }
    }
}