:root {
    --max: 1120px;
    --nav-height: 50px;
}
body.theme-venom {
    --bg: #100d0d; --panel: #1c1515; --panel-2: #261b19; --border: #624039;
    --ink: #f4ece2; --muted: #c6b1a3; --accent: #df6245; --accent-soft: #7daa64; --accent-pale: #e5bd72;
    --header-start: #5b201a; --header-mid: #193c25; --nav-bg: #0b0909;
}

body.theme-miles {
    --bg: #130d0d; --panel: #211515; --panel-2: #2b1d1b; --border: #69443c;
    --ink: #f6eee4; --muted: #c9b4a7; --accent: #f06b4f; --accent-soft: #83bd73; --accent-pale: #f0d69a;
    --header-start: #66231e; --header-mid: #275332; --nav-bg: #0d0909;
}

body.theme-peter {
    --bg: #071218; --panel: #0d2028; --panel-2: #142c34; --border: #34596b;
    --ink: #edf6f2; --muted: #aac2c4; --accent: #55b8f2; --accent-soft: #d5e8d0; --accent-pale: #78bd88;
    --header-start: #123f67; --header-mid: #174232; --nav-bg: #050d11;
}

* { box-sizing: border-box; }
        html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
        html, body { overflow-x: clip; }
        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font: 16px/1.6 Georgia, "Times New Roman", serif;
        }
        a { color: var(--accent-pale); }
        img { max-width: 100%; }
        button, input { font: inherit; }
        .container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
        .skip-link {
            position: fixed;
            top: 8px;
            left: 8px;
            z-index: 30;
            padding: .65rem 1rem;
            border-radius: 8px;
            background: var(--panel);
            color: var(--ink);
            transform: translateY(-180%);
        }
        .skip-link:focus { transform: none; }
        .utility-nav {
            border-bottom: 1px solid var(--border);
            background: var(--nav-bg);
        }
        .utility-nav .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: .45rem 1rem;
            padding: .65rem 0;
        }
        .utility-nav strong {
            color: var(--accent-pale);
            font-size: .84rem;
            letter-spacing: .04em;
        }
        .utility-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
        .utility-nav a {
            color: var(--muted);
            font-size: .8rem;
            font-weight: 700;
            text-decoration: none;
        }
        .utility-nav a:hover { color: var(--ink); text-decoration: underline; }
        header {
            padding: 2.7rem 0 2.3rem;
            border-bottom: 3px solid var(--accent);
            background:
                radial-gradient(circle at 78% 15%, color-mix(in srgb, var(--accent-pale) 24%, transparent), transparent 28%),
                linear-gradient(135deg, var(--header-start), var(--header-mid) 55%, var(--bg));
            text-align: center;
        }
        .hero {
            display: flex;
            align-items: flex-start;
            gap: 1.5rem;
            flex-wrap: wrap;
        }
        .hero-card {
            flex: 0 0 auto;
            width: min(280px, 100%);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 12px 36px #000a;
        }
        .hero-copy {
            flex: 1 1 420px;
            min-width: 0;
        }
        .eyebrow {
            margin: 0 0 .5rem;
            color: var(--accent-pale);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
        }
        h1 { margin: 0; color: var(--accent-pale); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; }
        h2 {
            margin: 0 0 1rem;
            padding-bottom: .35rem;
            border-bottom: 1px solid var(--border);
            color: var(--accent-pale);
            font-size: 1.55rem;
        }
        h3 { margin: 0 0 .35rem; font-size: 1rem; }
        p { margin: .35rem 0 1rem; }
        .sub { max-width: 760px; margin-inline: auto; color: var(--ink); font-size: 1.05rem; font-style: italic; }
        .badges { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.15rem; }
        .badge {
            padding: .35rem .68rem;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: color-mix(in srgb, var(--panel) 86%, transparent);
            color: var(--accent-pale);
            font-size: .76rem;
            font-weight: 700;
        }
        .section-nav {
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid var(--border);
            background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
            backdrop-filter: blur(12px);
        }
        .section-nav .container {
            display: flex;
            gap: 1.15rem;
            overflow-x: auto;
            padding: .65rem 0;
            overscroll-behavior-x: contain;
        }
        .section-nav a {
            flex: 0 0 auto;
            min-height: 32px;
            color: var(--accent-pale);
            font-size: .86rem;
            font-weight: 700;
            line-height: 32px;
            text-decoration: none;
            white-space: nowrap;
        }
        .section-nav a:hover { color: var(--ink); text-decoration: underline; }
        main { padding: 2.2rem 0 4rem; }
        section, [id] { scroll-margin-top: calc(var(--nav-height) + 12px); }
        section { margin-top: 3rem; }
        main > section:first-child { margin-top: 0; }
        .box {
            padding: 1.25rem;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--panel);
        }
        .box strong { color: var(--accent-pale); }
        .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
        ul { margin: .5rem 0 0; padding-left: 1.25rem; }
        li + li { margin-top: .6rem; }
        .key-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
        .key-card {
            display: grid;
            grid-template-columns: 105px minmax(0, 1fr);
            gap: 1rem;
            align-items: center;
            padding: .85rem;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--panel);
        }
        .key-card p { margin: 0; color: var(--muted); font-size: .9rem; }
        .zoom-card {
            display: block;
            width: 100%;
            aspect-ratio: 488 / 680;
            padding: 0;
            overflow: hidden;
            border: 0;
            border-radius: 8px;
            background: transparent;
            color: inherit;
            cursor: zoom-in;
        }
        .zoom-card img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            object-fit: contain;
        }
        .hero-card.zoom-card { width: min(280px, 100%); }
        .deck-tools {
            display: flex;
            flex-wrap: wrap;
            gap: .75rem;
            justify-content: space-between;
            align-items: end;
            margin-bottom: 1rem;
        }
        label { display: grid; gap: .3rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
        input {
            width: min(360px, 78vw);
            padding: .65rem .75rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--nav-bg);
            color: var(--ink);
        }
        .filters { display: flex; flex-wrap: wrap; gap: .4rem; }
        .filter {
            padding: .5rem .65rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--panel);
            color: var(--muted);
            cursor: pointer;
        }
        .filter:hover, .filter[aria-pressed="true"] {
            border-color: var(--accent);
            background: var(--panel-2);
            color: var(--ink);
        }
        .count { color: var(--muted); font-size: .86rem; }
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
            gap: .9rem;
        }
        .card {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--panel);
        }
        .card button { display: block; width: 100%; }
        .card-copy { padding: .65rem; }
        .card-name { font-size: .82rem; font-weight: 800; line-height: 1.3; }
        .card-type { margin-top: .25rem; color: var(--muted); font-size: .7rem; line-height: 1.35; }
        .quantity { color: var(--accent-pale); font-size: .7rem; font-weight: 800; }
        .placeholder {
            display: grid;
            width: 100%;
            aspect-ratio: 488 / 680;
            place-items: center;
            padding: 1rem;
            background: linear-gradient(145deg, var(--panel-2), var(--panel));
            color: var(--muted);
            text-align: center;
        }
        dialog {
            width: min(580px, calc(100% - 24px));
            max-height: calc(100dvh - 24px);
            padding: 14px;
            overflow: auto;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--panel);
            color: var(--ink);
        }
        dialog::backdrop { background: #000c; }
        dialog img {
            display: block;
            width: 100%;
            height: min(680px, calc(100dvh - 72px));
            border-radius: 8px;
            object-fit: contain;
        }
        .close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 38px;
            height: 38px;
            border: 1px solid #fff5;
            border-radius: 50%;
            background: var(--nav-bg);
            color: white;
            cursor: pointer;
            z-index: 1;
        }
        .note { color: var(--muted); font-size: .88rem; }
        .resource-menu {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .75rem;
        }
        .resource-menu a {
            padding: .85rem 1rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--panel);
            color: var(--accent-pale);
            font-weight: 700;
            text-align: center;
            text-decoration: none;
        }
        .resource-menu a:hover { background: var(--panel-2); }
        footer {
            padding: 1.4rem 0 2.5rem;
            border-top: 1px solid var(--border);
            color: var(--muted);
            font-size: .82rem;
        }
        [hidden] { display: none !important; }
        :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
        @media (max-width: 720px) {
            header { padding: 2.1rem 0 1.8rem; }
            .utility-nav .container { justify-content: center; text-align: center; }
            .utility-links { justify-content: center; }
            .hero { flex-direction: column; align-items: center; }
            .hero-copy { flex-basis: auto; width: 100%; }
            .grid-2, .key-grid, .resource-menu { grid-template-columns: 1fr; }
            h1 { font-size: 1.9rem; overflow-wrap: anywhere; }
            .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 460px) {
            .card-grid { grid-template-columns: 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                scroll-behavior: auto !important;
                transition: none !important;
            }
        }