.overwatch-viz {
            --text: #edf4f7;
            --muted: #a2b0ba;
            --border: #3b5260;
            --panel: #0e151c;
        }

        .overwatch-viz * { box-sizing: border-box; }

        .overwatch-viz {
            position: relative;
            font-family: var(--sans);
            background: transparent;
            margin: 0;
            padding: 1.25rem 0 0;
            text-align: center;
            color: var(--text);
        }

        .controls-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            margin-bottom: 6px;
        }

        .control-group {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        /* These controls are mutually exclusive by view. Explicitly honor hidden
           because .control-group defines display:flex in author CSS. */
        #distributionOrderWrap[hidden],
        #comparisonMetricWrap[hidden] {
            display: none;
        }

        .control-group label {
            font-weight: 600;
        }

        .overwatch-viz select,
        .overwatch-viz button {
            font: inherit;
        }

        .overwatch-viz select {
            padding: 5px 8px;
            border: 1px solid var(--border);
            border-radius: 5px;
            background: var(--surface-raised);
            color: var(--text);
        }

        .filter-wrap {
            position: relative;
        }

        #filterButton {
            padding: 5px 11px;
            border: 1px solid var(--border);
            border-radius: 5px;
            background: var(--surface-raised);
            color: var(--text);
            cursor: pointer;
        }

        #filterButton:hover { background: #1a2631; }

        #filterButton.filter-active {
            background: color-mix(in srgb, var(--page-accent) 13%, var(--surface-raised));
            border-color: var(--page-accent);
            color: var(--text);
            font-weight: 650;
        }

        .filter-panel {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            width: min(860px, calc(100vw - 40px));
            padding: 14px 16px 15px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 14px 38px rgba(0,0,0,.48);
            z-index: 10;
            text-align: left;
        }

        .filter-panel[hidden] { display: none; }

        .filter-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid var(--line);
        }

        .filter-actions-left {
            display: flex;
            gap: 8px;
        }

        .filter-action {
            border: 1px solid var(--border);
            border-radius: 5px;
            background: var(--surface-raised);
            padding: 4px 8px;
            cursor: pointer;
        }

        .filter-action:hover { background: #1a2631; }

        .filter-columns {
            display: grid;
            grid-template-columns: repeat(4, minmax(150px, 1fr));
            gap: 18px;
        }

        .filter-section-title {
            font-weight: 700;
            font-size: var(--font-meta);
            margin-bottom: 6px;
            color: var(--text-soft);
        }

        .filter-section-title.tier-title {
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .filter-section-title.tier-title input {
            margin: 0;
        }

        .filter-option {
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 26px;
            font-size: var(--font-meta);
            white-space: nowrap;
        }

        .filter-option input { margin: 0; }

        .hide-zero {
            display: flex;
            align-items: center;
            gap: 7px;
            white-space: nowrap;
            font-size: var(--font-meta);
        }

        .methodology-wrap {
            position: relative;
        }

        #methodologyButton {
            padding: 5px 10px;
            border: 1px solid var(--border);
            border-radius: 5px;
            background: var(--surface-raised);
            color: var(--text);
            cursor: pointer;
        }

        #methodologyButton:hover { background: #1a2631; }

        .methodology-panel {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: min(470px, calc(100vw - 40px));
            padding: 15px 17px 16px;
            background: var(--panel);
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 14px 38px rgba(0,0,0,.48);
            z-index: 12;
            text-align: left;
            font-size: var(--font-meta);
            line-height: 1.45;
        }

        .methodology-panel[hidden] { display: none; }

        .methodology-title {
            margin: 0 0 9px;
            font-size: var(--font-meta);
            font-weight: 750;
            color: var(--text);
        }

        .methodology-panel p {
            margin: 0 0 8px;
        }

        .methodology-panel p:last-child {
            margin-bottom: 0;
        }

        #filterStatus {
            min-height: 20px;
            margin: 3px 0 2px;
            font-size: var(--font-meta);
            color: var(--muted);
        }

        .overwatch-viz svg {
            width: 100%;
            height: auto;
            max-width: 1900px;
        }

        .skin-count-label {
            font-size: var(--font-small);
            font-weight: 600;
            fill: var(--text);
        }

        .square {
            stroke: color-mix(in srgb, var(--line-strong) 80%, transparent);
            stroke-width: 0.4px;
        }

        .note {
            font-size: var(--font-meta);
            fill: var(--muted);
        }

        .chart-title {
            font-size: var(--font-entry-title);
            font-weight: 700;
            text-anchor: middle;
            fill: var(--text);
        }

        .chart-subtitle {
            font-size: var(--font-subheading);
            text-anchor: middle;
            fill: var(--muted);
        }



        .view-toggle {
            display: inline-flex;
            border: 1px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
            background: var(--surface-raised);
        }

        .view-button {
            border: 0;
            border-right: 1px solid var(--border);
            background: var(--surface-raised);
            color: var(--muted);
            padding: 5px 10px;
            cursor: pointer;
        }

        .view-button:last-child { border-right: 0; }
        .view-button:hover { background: #1a2631; }
        .view-button.active {
            background: color-mix(in srgb, var(--page-accent) 16%, var(--surface-raised));
            color: var(--text);
            font-weight: 700;
        }

        #compareWrap {
            width: 100%;
            max-width: 1900px;
            margin: 0 auto;
        }

        #compareWrap[hidden] { display: none; }

        #compareChart {
            display: block;
            margin: 0 auto;
            overflow: visible;
        }

        .compare-title {
            font-size: var(--font-entry-title);
            font-weight: 700;
            text-anchor: middle;
            fill: var(--text);
        }

        .compare-subtitle {
            font-size: var(--font-meta);
            text-anchor: middle;
            fill: var(--muted);
        }

        .compare-axis text {
            font-size: var(--font-meta);
            fill: var(--muted);
        }

        .compare-axis path { stroke: var(--line-strong); }
        .compare-axis line { stroke: var(--line); }

        .compare-axis-title {
            font-size: var(--font-meta);
            font-weight: 650;
            text-anchor: middle;
            fill: var(--text-soft);
        }

        .compare-bar {
            cursor: pointer;
            stroke: color-mix(in srgb, var(--accent-bright) 30%, transparent);
            stroke-width: 0.8px;
            transition: filter 140ms ease, stroke 140ms ease, stroke-width 140ms ease;
        }

        .compare-bar.is-highlighted {
            stroke: var(--text);
            stroke-width: 1.6px;
            filter: brightness(1.18) drop-shadow(0 0 8px rgba(103, 216, 255, 0.58));
        }

        .compare-hero-label {
            font-size: var(--font-meta);
            font-weight: 700;
            fill: var(--text);
            cursor: pointer;
        }

        .compare-value-label {
            font-size: var(--font-meta);
            font-weight: 650;
            fill: var(--text-soft);
            pointer-events: none;
        }

        .compare-tooltip {
            position: fixed;
            z-index: 30;
            pointer-events: none;
            background: rgba(8, 11, 16, 0.97);
            color: var(--text);
            border: 1px solid var(--page-accent);
            border-radius: 6px;
            padding: 8px 10px;
            font-size: var(--font-meta);
            line-height: 1.4;
            box-shadow: 0 4px 16px rgba(0,0,0,.2);
            text-align: left;
            max-width: 280px;
        }

        .compare-tooltip[hidden] { display: none; }

        dialog.hero-dialog {
            width: min(940px, calc(100vw - 36px));
            max-height: min(82vh, 900px);
            border: 1px solid var(--line-strong);
            border-radius: 10px;
            padding: 0;
            box-shadow: 0 22px 70px rgba(0,0,0,.65);
            color: var(--text);
            background: var(--panel);
        }

        dialog.hero-dialog::backdrop {
            background: rgba(2, 5, 8, .78);
            backdrop-filter: blur(3px);
        }

        .dialog-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 20px;
            padding: 20px 22px 14px;
            border-bottom: 1px solid var(--line);
        }

        .dialog-title-wrap { text-align: left; }
        .dialog-title-wrap h2 { margin: 0 0 4px; font-size: var(--font-section-title); }
        .dialog-title-wrap p { margin: 0; color: var(--muted); font-size: var(--font-meta); }

        .dialog-close {
            width: 34px;
            height: 34px;
            border: 1px solid var(--border);
            border-radius: 6px;
            color: var(--text);
            background: var(--surface-raised);
            cursor: pointer;
            font-size: var(--font-large);
            line-height: 1;
        }

        .dialog-close:hover { background: #1a2631; }

        .dialog-body {
            padding: 18px 22px 24px;
            overflow: auto;
            max-height: calc(82vh - 82px);
        }

        .dialog-summary {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }

        .summary-card {
            border: 1px solid var(--line);
            border-radius: 7px;
            background: var(--surface-raised);
            padding: 10px 12px;
            text-align: left;
        }

        .summary-card .summary-label { color: var(--muted); font-size: var(--font-meta); margin-bottom: 3px; }
        .summary-card .summary-value { font-size: var(--font-subheading); font-weight: 700; }

        .dialog-section-title {
            margin: 0;
            text-align: left;
            font-size: var(--font-meta);
            font-weight: 750;
            color: var(--text-soft);
        }

        .dialog-inspect-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 16px;
            margin: 2px 0 10px;
        }

        .dialog-section-note {
            margin-top: 3px;
            color: var(--faint);
            font-size: var(--font-meta);
            text-align: left;
        }

        #dialogDistributionSvg {
            display: block;
            width: 100%;
            height: auto;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: #0b1117;
        }

        .dialog-unit-mark {
            stroke: rgba(255,255,255,.18);
            stroke-width: .7px;
        }

        .dialog-legend-label {
            font-size: var(--font-meta);
            fill: var(--text-soft);
        }

        .dialog-legend-swatch {
            stroke: rgba(255,255,255,.16);
            stroke-width: .7px;
        }

        .chart-panel--overwatch {
            overflow: visible;
        }

        .overwatch-viz .controls-bar {
            padding-inline: 0.5rem;
        }

        .overwatch-viz .control-group > label,
        .overwatch-viz .hide-zero,
        .overwatch-viz #filterStatus {
            font-family: var(--mono);
            font-size: var(--font-meta);
        }

        .overwatch-viz select,
        .overwatch-viz button {
            min-height: 2.25rem;
        }

        .overwatch-viz input {
            accent-color: var(--page-accent);
        }

        .overwatch-viz select:focus-visible,
        .overwatch-viz button:focus-visible,
        .overwatch-viz input:focus-visible {
            outline-color: var(--page-accent);
        }

        .overwatch-viz__canvas {
            max-height: 46rem;
            margin-top: 0.75rem;
            overflow: auto;
            border-top: 1px solid var(--line);
            scrollbar-color: var(--line-strong) var(--surface);
        }

        .overwatch-viz #chart,
        .overwatch-viz #compareChart {
            display: block;
            width: 100%;
            min-width: 0;
            margin-inline: auto;
        }

        .chart-panel--overwatch.is-expanded {
            overflow: auto;
        }

        .chart-panel--overwatch.is-expanded .overwatch-viz {
            width: min(118rem, 100%);
            margin-inline: auto;
        }

        .chart-panel--overwatch.is-expanded .overwatch-viz__canvas {
            max-height: none;
            overflow: visible;
        }

        @media (max-width: 650px) {
            .dialog-summary { grid-template-columns: 1fr; }
            .dialog-inspect-head { align-items: flex-start; flex-direction: column; }

            .overwatch-viz #chart,
            .overwatch-viz #compareChart {
                min-width: 52rem;
            }
        }

        @media (max-width: 800px) {
            .filter-columns { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
        }