@media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ランキング絞り込み：Tailwindの生成状況に依存しない専用UI */
        .smart-filter-card {
            margin: 1rem 0;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 1rem;
            background: #fff;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        }
        .smart-filter-header,
        .smart-filter-footer,
        .smart-filter-mobile-actions,
        .smart-sheet-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
        }
        .smart-filter-title {
            margin: 0;
            color: #374151;
            font-size: 1rem;
            font-weight: 800;
        }
        .smart-filter-clear {
            border: 0;
            background: transparent;
            color: #64748b;
            font-size: .75rem;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 3px;
            cursor: pointer;
        }
        .smart-filter-clear:hover { color: #ea580c; }
        .smart-filter-search {
            position: relative;
            display: block;
            margin-top: .8rem;
        }
        .smart-filter-search svg {
            position: absolute;
            top: 50%;
            left: .85rem;
            width: 1.1rem;
            height: 1.1rem;
            color: #94a3b8;
            pointer-events: none;
            transform: translateY(-50%);
        }
        .smart-filter-search input {
            width: 100%;
            min-height: 2.9rem;
            padding: .7rem 2.5rem .7rem 2.6rem;
            border: 1px solid #d1d5db;
            border-radius: .8rem;
            background: #fff;
            color: #334155;
            font-size: .95rem;
            font-weight: 600;
            outline: none;
            box-sizing: border-box;
        }
        .smart-filter-search input:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, .16);
        }
        .smart-filter-sort-label {
            display: block;
            margin: .85rem 0 .35rem;
            color: #64748b;
            font-size: .72rem;
            font-weight: 700;
        }
        .smart-sort-group {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: .25rem;
            padding: .25rem;
            border-radius: .8rem;
            background: #f1f5f9;
        }
        .smart-sort-button {
            min-width: 0;
            padding: .58rem .25rem;
            border: 0;
            border-radius: .6rem;
            background: transparent;
            color: #475569;
            font-size: .78rem;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
        }
        .smart-sort-button:hover { background: rgba(255,255,255,.7); }
        .smart-sort-button[aria-pressed="true"] {
            background: #fff7ed;
            color: #ea580c;
            box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
        }
        .smart-sort-direction {
            display: inline-block;
            min-width: .7em;
            margin-left: .1rem;
        }
        .smart-filter-mobile-actions {
            flex-wrap: wrap;
            margin-top: .8rem;
        }
        .smart-mobile-filter-button,
        .smart-danger-toggle {
            min-height: 2.45rem;
            border: 1px solid #dbe2ea;
            border-radius: 999px;
            background: #fff;
            color: #475569;
            font-size: .78rem;
            font-weight: 800;
            cursor: pointer;
        }
        .smart-mobile-filter-button {
            display: none;
            flex: 1;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: .55rem .85rem;
            text-align: left;
        }
        .smart-mobile-filter-button strong {
            overflow: hidden;
            color: #ea580c;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .smart-danger-toggle {
            padding: .55rem .9rem;
            white-space: nowrap;
        }
        .smart-danger-toggle[aria-pressed="true"] {
            border-color: #c4b5fd;
            background: #f3e8ff;
            color: #6b21a8;
            box-shadow: 0 0 0 2px rgba(147, 51, 234, .08);
        }
        .smart-filter-advanced {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .75rem;
            margin-top: .8rem;
        }
        .smart-filter-field { display: block; }
        .smart-filter-field > span {
            display: block;
            margin-bottom: .3rem;
            color: #64748b;
            font-size: .72rem;
            font-weight: 700;
        }
        .smart-select-wrap { position: relative; }
        .smart-select {
            width: 100%;
            min-height: 2.8rem;
            padding: .65rem 2.4rem .65rem .85rem;
            border: 1px solid #d1d5db;
            border-radius: .75rem;
            background: #fff;
            color: #334155;
            font-size: .88rem;
            font-weight: 700;
            outline: none;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            box-sizing: border-box;
        }
        .smart-select:focus {
            border-color: #f97316;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, .16);
        }
        .smart-select-arrow {
            position: absolute;
            top: 50%;
            right: .8rem;
            width: 1rem;
            height: 1rem;
            color: #f97316;
            pointer-events: none;
            transform: translateY(-50%);
        }
        .smart-filter-footer {
            margin-top: .8rem;
            padding-top: .7rem;
            border-top: 1px solid #f1f5f9;
        }
        .smart-result-summary {
            flex: 1 1 auto;
            margin: 0 0 0 auto;
            color: #64748b;
            font-size: .74rem;
            font-weight: 700;
            text-align: right;
        }
        .smart-sheet-header,
        .smart-sheet-apply,
        .smart-sheet-backdrop { display: none; }
        .smart-sheet-close {
            width: 2.25rem;
            height: 2.25rem;
            border: 0;
            border-radius: 999px;
            background: #f1f5f9;
            color: #475569;
            font-size: 1.25rem;
            cursor: pointer;
        }

        /* ランキング直前のコンパクトなスティッキーフィルター */
        .ranking-quick-filter {
            position: sticky;
            top: 0;
            z-index: 50;
            padding: .65rem .75rem .6rem;
            border-bottom: 1px solid #e5e7eb;
            border-radius: 1rem 1rem 0 0;
            background: rgba(255, 255, 255, .96);
            box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
            backdrop-filter: blur(8px);
        }
        .ranking-quick-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .65rem;
            margin-bottom: .45rem;
        }
        .ranking-scope-button {
            min-width: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: #334155;
            text-align: left;
            cursor: pointer;
        }
        .ranking-scope-button:hover .ranking-quick-scope { color: #ea580c; }
        .ranking-scope-button:focus-visible {
            border-radius: .45rem;
            outline: 2px solid #f97316;
            outline-offset: 3px;
        }
        .ranking-quick-scope,
        .ranking-quick-metric { display: block; }
        .ranking-quick-scope {
            overflow: hidden;
            font-size: .82rem;
            font-weight: 800;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ranking-quick-metric {
            margin-top: .08rem;
            color: #64748b;
            font-size: .68rem;
            font-weight: 700;
        }
        .ranking-quick-danger {
            flex: 0 0 auto;
            min-height: 2rem;
            padding: .38rem .7rem;
            border: 1px solid #dbe2ea;
            border-radius: 999px;
            background: #fff;
            color: #475569;
            font-size: .7rem;
            font-weight: 800;
            cursor: pointer;
        }
        .ranking-quick-danger[aria-pressed="true"] {
            border-color: #c4b5fd;
            background: #f3e8ff;
            color: #6b21a8;
        }
        .ranking-quick-sort-group {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: .2rem;
            padding: .2rem;
            border-radius: .7rem;
            background: #f1f5f9;
        }
        .ranking-quick-sort-group .smart-sort-button {
            padding: .45rem .12rem;
            font-size: .7rem;
        }

        /* 正式なtableとスティッキー見出し */
        .ranking-table-scroll {
            width: 100%;
            overflow-x: auto;
            overflow-anchor: none;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
        }
        .ranking-table {
            width: 100%;
            min-width: 580px;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
            background: #fff;
        }
        .ranking-col-rank { width: 60px; }
        .ranking-col-pref { width: 90px; }
        .ranking-col-name { width: auto; }
        .ranking-col-value { width: 110px; }
        .ranking-table th {
            position: static;
            padding: .55rem .75rem;
            border-bottom: 1px solid #e5e7eb;
            background: #f8fafc;
            color: #64748b;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .02em;
            white-space: nowrap;
        }
        .ranking-floating-header {
            position: fixed;
            z-index: 45;
            overflow: hidden;
            border-bottom: 1px solid #e5e7eb;
            background: #f8fafc;
            box-shadow: 0 2px 7px rgba(15, 23, 42, .09);
            pointer-events: none;
        }
        .ranking-floating-header[hidden] { display: none; }
        .ranking-floating-table {
            margin: 0;
            transform: translateX(0);
            will-change: transform;
        }
        .ranking-floating-table th { border-bottom: 0; }
        .ranking-table td {
            padding: .45rem .75rem;
            border-bottom: 1px solid #f1f5f9;
            background: #fff;
            line-height: 1.25;
            white-space: nowrap;
        }
        .ranking-table tbody tr:hover td { background: #f8fafc; }
        .ranking-table tbody tr:last-child td { border-bottom: 0; }
        .ranking-table .ranking-cell-name {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ranking-table .ranking-cell-name a {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ranking-station-pref-mobile,
        .ranking-header-mobile { display: none; }
        .ranking-table .ranking-name-warning td.ranking-cell-name { background: #fef9c3; }
        .ranking-table .ranking-name-severe td.ranking-cell-name { background: #ffedd5; }
        .ranking-table .ranking-name-danger td.ranking-cell-name { background: #f3e8ff; }

        /* 指標説明は自動表示せず、必要なときだけ開く。並べ替え時のレイアウトシフトを防止。 */
        .metric-description {
            margin: 0 0 1rem;
            overflow: hidden;
            border: 1px solid #fed7aa;
            border-radius: .75rem;
            background: #fff7ed;
            color: #374151;
            font-size: .75rem;
        }
        .metric-description > summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .75rem 1rem;
            color: #ea580c;
            font-weight: 800;
            cursor: pointer;
            list-style: none;
            outline: none;
            user-select: none;
        }
        .metric-description > summary::-webkit-details-marker { display: none; }
        .metric-description > summary::marker { content: ''; }
        .metric-description > summary:focus-visible {
            box-shadow: inset 0 0 0 2px #fb923c;
        }
        .metric-description-action {
            flex: 0 0 auto;
            color: #f97316;
            font-size: .625rem;
            white-space: nowrap;
        }
        .metric-description-action::before { content: attr(data-show-label); }
        .metric-description[open] .metric-description-action::before { content: attr(data-hide-label); }
        .metric-description-body {
            padding: .75rem 1rem 1rem;
            border-top: 1px solid #fed7aa;
            line-height: 1.65;
        }
        .metric-description-body p { margin: 0; }
        .metric-description-body p + p { margin-top: .5rem; }

        .ranking-empty-cell {
            padding: 1rem !important;
            color: #64748b;
            font-size: .85rem;
            font-weight: 700;
            text-align: center;
        }

        /* 気象情報と明確に区別した広告・PR枠 */
        .affiliate-slot {
            margin: .25rem 0 1rem;
            padding: .85rem;
            border: 1px solid #e2e8f0;
            border-radius: .5rem;
            background: #f8fafc;
        }
        .affiliate-slot.hidden,
        .affiliate-slot[hidden] { display: none; }
        .ad-slot__disclosure {
            display: inline-flex;
            margin-bottom: .55rem;
            padding: .15rem .45rem;
            border: 1px solid #cbd5e1;
            border-radius: .35rem;
            background: #fff;
            color: #64748b;
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .04em;
        }
        .affiliate-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .75rem;
            margin-bottom: .65rem;
        }
        .affiliate-label {
            display: inline-flex;
            flex: 0 0 auto;
            align-items: center;
            min-height: 1.35rem;
            padding: .15rem .45rem;
            border: 1px solid #cbd5e1;
            border-radius: .35rem;
            background: #fff;
            color: #64748b;
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .04em;
        }
        .affiliate-heading {
            flex: 1 1 auto;
            min-width: 0;
        }
        .affiliate-heading strong {
            display: block;
            color: #334155;
            font-size: .84rem;
            line-height: 1.35;
        }
        .affiliate-heading span {
            display: block;
            margin-top: .12rem;
            color: #64748b;
            font-size: .68rem;
            line-height: 1.45;
        }
        .affiliate-products {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .55rem;
        }
        .affiliate-product {
            display: block;
            min-width: 0;
            padding: .7rem;
            border: 1px solid #e2e8f0;
            border-radius: .375rem;
            background: #fff;
            color: #334155;
            text-decoration: none;
            transition: border-color .15s ease, background-color .15s ease;
        }
        .affiliate-product-link {
            display: block;
            color: inherit;
            text-decoration: none;
        }
        .affiliate-product-body,
        .affiliate-product-name,
        .affiliate-product-description { display: block; }
        .affiliate-product-name {
            overflow: hidden;
            color: #334155;
            font-size: .78rem;
            font-weight: 800;
            line-height: 1.4;
            text-overflow: ellipsis;
        }
        .affiliate-product-description {
            margin-top: .25rem;
            color: #64748b;
            font-size: .66rem;
            line-height: 1.4;
        }
        .affiliate-product:hover {
            border-color: #fdba74;
            background: #fff7ed;
        }
        .affiliate-product:focus-visible {
            outline: 2px solid #f97316;
            outline-offset: 2px;
        }
        .affiliate-category {
            display: block;
            margin-bottom: .22rem;
            color: #ea580c;
            font-size: .62rem;
            font-weight: 800;
        }
        .affiliate-product strong {
            display: block;
            overflow: hidden;
            color: #334155;
            font-size: .78rem;
            line-height: 1.4;
            text-overflow: ellipsis;
        }
        .affiliate-product span:last-child {
            display: block;
            margin-top: .25rem;
            color: #64748b;
            font-size: .66rem;
            line-height: 1.4;
        }
        .affiliate-note {
            margin: .55rem 0 0;
            color: #94a3b8;
            font-size: .6rem;
            line-height: 1.4;
            text-align: right;
        }
        .ranking-affiliate-row td {
            padding: .8rem !important;
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0 !important;
            background: #f8fafc !important;
            white-space: normal;
        }
        .ranking-affiliate-row:hover td { background: #f8fafc !important; }
        .ranking-affiliate-row .affiliate-slot { margin: 0; }

        .region-ranking {
            border-radius: 8px;
        }
        .region-ranking-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: .5rem;
        }
        .region-ranking-card {
            min-width: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-areas: "region value" "station value";
            align-items: center;
            gap: .1rem .4rem;
            min-height: 3.65rem;
            padding: .56rem .64rem;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fff;
            color: #374151;
            box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
            transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
        }
        .region-ranking-card:hover,
        .region-ranking-card:focus-visible {
            border-color: #60a5fa;
            background: #eff6ff;
            outline: none;
        }
        .region-ranking-card:active { transform: translateY(1px); }
        .region-ranking-card.is-current {
            border-color: #2563eb;
            background: #eff6ff;
            box-shadow: inset 3px 0 #2563eb;
        }
        .region-ranking-name {
            grid-area: region;
            overflow: hidden;
            color: #1d4ed8;
            font-size: .92rem;
            line-height: 1.18;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .region-ranking-station {
            grid-area: station;
            overflow: hidden;
            color: #64748b;
            font-size: .80rem;
            line-height: 1.22;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .region-ranking-value {
            grid-area: value;
            font-size: 1.08rem;
            line-height: 1.1;
            font-variant-numeric: tabular-nums;
            font-weight: 900;
            white-space: nowrap;
        }

        @media (min-width: 768px) {
            .region-ranking-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (min-width: 1180px) {
            .region-ranking-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        }

        /* r9: sharper surfaces while retaining genuinely pill-shaped controls. */
        .smart-filter-card,
        .metric-description,
        .map-stage,
        .station-detail-card,
        .seasonal-ticker-panel,
        #ranking-container,
        #heatmap-container,
        #nearest-station-container,
        footer details {
            border-radius: .5rem;
        }
        .smart-filter-search input,
        .smart-select,
        .smart-sort-button,
        .smart-mobile-filter-button,
        .smart-danger-toggle,
        .smart-sheet-apply,
        .location-diagnostics-button,
        .display-settings-option,
        .display-settings-row {
            border-radius: .375rem;
        }

        @media (max-width: 767px) {
            .smart-filter-card { padding: .85rem; }
            .smart-sort-button { padding: .58rem .12rem; font-size: .72rem; }
            .smart-mobile-filter-button { display: flex; }
            .smart-filter-mobile-actions { align-items: stretch; }
            .smart-danger-toggle { flex: 0 0 auto; padding-inline: .75rem; }
            .smart-filter-advanced {
                display: none;
                position: fixed;
                z-index: 80;
                left: 0;
                right: 0;
                bottom: 0;
                grid-template-columns: 1fr;
                gap: .9rem;
                max-height: 82vh;
                margin: 0;
                padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
                overflow-y: auto;
                border-radius: 1.25rem 1.25rem 0 0;
                background: #fff;
                box-shadow: 0 -12px 36px rgba(15, 23, 42, .18);
            }
            .smart-filter-advanced[data-open="true"] { display: grid; }
            .smart-sheet-header { display: flex; }
            .smart-sheet-header h3 {
                margin: 0;
                color: #334155;
                font-size: 1rem;
                font-weight: 800;
            }
            .smart-sheet-apply {
                display: block;
                width: 100%;
                min-height: 2.9rem;
                border: 0;
                border-radius: .8rem;
                background: #f97316;
                color: #fff;
                font-size: .9rem;
                font-weight: 800;
                cursor: pointer;
            }
            .smart-sheet-backdrop[data-open="true"] {
                display: block;
                position: fixed;
                z-index: 70;
                inset: 0;
                background: rgba(15, 23, 42, .42);
                backdrop-filter: blur(2px);
            }
            .smart-filter-footer { justify-content: flex-end; }
            .smart-result-summary {
                flex-basis: 100%;
                margin-left: 0;
                text-align: right;
            }
            .ranking-quick-filter { padding: .55rem .6rem .5rem; }
            .ranking-quick-sort-group .smart-sort-button { padding: .42rem .05rem; font-size: .66rem; }
            .ranking-quick-danger { padding-inline: .58rem; font-size: .66rem; }
            .ranking-quick-scope { font-size: .76rem; }
            .ranking-quick-metric { font-size: .64rem; }
            .ranking-table {
                min-width: 490px;
            }
            .ranking-col-rank { width: 48px; }
            /*
             * モバイルでは都道府県を地点名セル内に表示するため、独立した都道府県列は
             * 見た目だけ隠す。table-cell を display:none にすると、Firefox系ブラウザで
             * 後続の地点名セルが幅0の列へずれて消えるため、セル自体は表グリッドに残す。
             */
            .ranking-col-pref { width: 0; }
            .ranking-cell-pref {
                width: 0;
                max-width: 0;
                padding-left: 0 !important;
                padding-right: 0 !important;
                overflow: hidden;
                visibility: hidden;
                white-space: nowrap;
            }
            .ranking-col-name { width: 132px; }
            .ranking-col-value { width: 102px; }
            .ranking-header-desktop { display: none; }
            .ranking-header-mobile { display: inline; }
            .ranking-table th { padding: .5rem .55rem; }
            .ranking-table td { padding: .42rem .55rem; }
            .ranking-table .ranking-cell-name {
                white-space: normal;
            }
            .ranking-table .ranking-cell-name a {
                line-height: 1.15;
                white-space: nowrap;
            }
            .ranking-table .ranking-station-name {
                display: block;
                overflow: hidden;
                color: #1f2937;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .ranking-station-pref-mobile {
                display: block;
                overflow: hidden;
                margin-top: .16rem;
                color: #64748b;
                font-size: .62rem;
                font-weight: 700;
                line-height: 1.15;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .affiliate-slot { padding: .72rem; }
            .affiliate-header { align-items: flex-start; }
            #context-affiliate-slot .affiliate-products { grid-template-columns: 1fr; }

            /* ランキング内広告は表の流れを分断しないコンパクト表示 */
            .ranking-affiliate-row td {
                padding: .35rem !important;
            }
            .ranking-affiliate-row .affiliate-slot {
                padding: .48rem .55rem;
                border-radius: .65rem;
            }
            .ranking-affiliate-row .affiliate-header {
                align-items: center;
                gap: .45rem;
                margin-bottom: .38rem;
            }
            .ranking-affiliate-row .affiliate-label {
                min-height: 1.1rem;
                padding: .08rem .32rem;
                font-size: .52rem;
            }
            .ranking-affiliate-row .affiliate-heading strong {
                font-size: .72rem;
                line-height: 1.25;
            }
            .ranking-affiliate-row .affiliate-heading span {
                display: none;
            }
            .ranking-affiliate-row .affiliate-products {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: .35rem;
            }
            .ranking-affiliate-row .affiliate-product {
                padding: .45rem .5rem;
                border-radius: .55rem;
            }
            .ranking-affiliate-row .affiliate-category {
                margin-bottom: .12rem;
                font-size: .54rem;
            }
            .ranking-affiliate-row .affiliate-product strong,
            .ranking-affiliate-row .affiliate-product-name {
                display: -webkit-box;
                overflow: hidden;
                font-size: .68rem;
                line-height: 1.28;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .ranking-affiliate-row .affiliate-product-description {
                display: none;
            }
            .ranking-affiliate-row .affiliate-note {
                margin-top: .28rem;
                font-size: .52rem;
            }
        }

/* 地点詳細・地図操作（v4.2.5） */
.map-stage {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: .75rem;
    background: #f1f5f9;
}
.map-controls {
    position: absolute;
    z-index: 15;
    right: .75rem;
    bottom: .75rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem;
    max-width: min(22rem, calc(100% - 1.5rem));
}
.map-controls button,
.map-flyout-close {
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: .45rem .65rem;
    border: 1px solid #cbd5e1;
    border-radius: .7rem;
    background: rgba(255,255,255,.96);
    color: #475569;
    font-size: .78rem;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(15,23,42,.12);
    backdrop-filter: blur(6px);
    cursor: pointer;
}
.map-controls button:hover,
.map-controls button:focus-visible,
.map-flyout-close:hover,
.map-flyout-close:focus-visible {
    border-color: #fb923c;
    color: #ea580c;
    outline: 2px solid transparent;
}
.map-controls button:focus-visible,
.map-flyout-close:focus-visible {
    box-shadow: 0 0 0 3px rgba(251,146,60,.3), 0 2px 8px rgba(15,23,42,.12);
}
.map-controls button[hidden] { display: none; }
.map-flyout-toggle,
.map-flyout-close { display: none; }
.map-flyout-toggle {
    width: 2.6rem;
    padding: 0;
}
.map-flyout-toggle .map-flyout-icon {
    width: 1.35rem;
    height: 1.35rem;
    pointer-events: none;
}
.map-flyout-toggle .map-flyout-icon-collapse { display: none; }
.map-flyout-toggle[aria-expanded="true"] .map-flyout-icon-expand { display: none; }
.map-flyout-toggle[aria-expanded="true"] .map-flyout-icon-collapse { display: block; }
.map-flyout-backdrop {
    position: fixed;
    z-index: 70;
    inset: 0;
    background: rgba(15,23,42,.58);
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(3px);
}
.map-flyout-backdrop[data-open="true"] { opacity: 1; }
body.map-flyout-open { overflow: hidden; }
body.map-flyout-open .map-flyout-host { z-index: 80; }

@media (min-width: 768px) {
    .map-flyout-toggle { display: inline-flex; align-items: center; justify-content: center; }
    #heatmap-container.map-flyout {
        position: fixed !important;
        z-index: 80;
        inset: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        flex-direction: column;
        overflow: hidden !important;
        border-radius: 1.25rem;
        content-visibility: visible !important;
        contain: none !important;
        box-shadow: 0 28px 90px rgba(15,23,42,.36);
    }
    #heatmap-container.map-flyout > summary {
        flex: 0 0 auto;
        padding-right: 8rem;
        cursor: default;
    }
    #heatmap-container.map-flyout > .map-flyout-close {
        position: absolute;
        z-index: 25;
        top: .55rem;
        right: .75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .3rem;
        min-height: 2.75rem;
    }
    #heatmap-container.map-flyout > .map-panel-body {
        position: absolute;
        inset: 3.75rem 0 0;
        display: flex;
        height: auto;
        min-height: 0;
        flex: none;
        flex-direction: column;
        overflow: hidden;
    }
    #heatmap-container.map-flyout .map-stage {
        min-height: 0;
        flex: 1 1 auto;
    }
    #heatmap-container.map-flyout #japan-map {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
    #heatmap-container.map-flyout .map-legend-panel {
        flex: 0 0 auto;
        margin-top: .75rem;
    }
    #heatmap-container.map-flyout .map-controls {
        right: 1rem;
        bottom: 1rem;
    }
}

.ranking-station-actions {
    display: inline-grid;
    width: min(100%, 10.25rem);
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 7.5rem) 2.75rem;
    align-items: center;
    vertical-align: middle;
}
.nearest-station-actions {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: .2rem;
    vertical-align: middle;
}
.station-detail-trigger {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.station-detail-trigger:hover,
.station-detail-trigger:focus-visible { color: #f97316; }
.station-detail-trigger:focus-visible {
    border-radius: .35rem;
    outline: 2px solid #f97316;
    outline-offset: 2px;
}
/*
 * ランキングではリンク位置を地点名の長さに左右されない固定位置へ揃える。
 * アイコン自体は小さく保ち、44pxの実タップ領域をリンク自身で確保する。
 */
.ranking-table .ranking-cell-name .station-jma-link,
.nearest-station-actions .station-jma-link {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    overflow: visible;
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: #718096;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
}
.ranking-table .ranking-cell-name .station-jma-link { justify-self: end; }
.nearest-station-actions .station-jma-link {
    flex: 0 0 2.75rem;
    margin-block: -.6rem;
}
.station-jma-icon {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.station-jma-link:hover {
    background: rgba(100, 116, 139, .12);
    color: #334155;
}
.station-jma-link:focus-visible {
    color: #ea580c;
    outline: 2px solid currentColor;
    outline-offset: 1px;
}
.nearest-station-detail { color: #ea580c; }

.station-detail-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    background: rgba(15,23,42,.46);
    opacity: 0;
    transition: opacity .18s ease;
    backdrop-filter: blur(2px);
}
.station-detail-backdrop[data-open="true"] { opacity: 1; }
.station-detail-sheet {
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(86vh, 760px);
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 1.35rem 1.35rem 0 0;
    background: #fff;
    box-shadow: 0 -18px 50px rgba(15,23,42,.24);
    transform: translateY(102%);
    transition: transform .18s ease;
}
.station-detail-sheet[data-open="true"] { transform: translateY(0); }
body.station-detail-open { overflow: hidden; }
.station-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid #f1f5f9;
}
.station-detail-pref {
    margin: 0 0 .15rem;
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
}
.station-detail-heading h2 {
    margin: 0;
    color: #334155;
    font-size: 1.35rem;
    font-weight: 900;
}
.station-detail-name-secondary {
    margin: .08rem 0 0;
    color: #64748b;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.25;
}
.station-detail-updated {
    margin: .2rem 0 0;
    color: #94a3b8;
    font-size: .68rem;
    font-weight: 700;
}
.station-detail-close {
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 1.35rem;
    cursor: pointer;
}
.station-detail-current {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 1rem 0;
    padding: .8rem 1rem;
    border-radius: 1rem;
    background: #fff7ed;
    color: #9a3412;
    font-weight: 800;
}
.station-detail-current strong { font-size: 2rem; }
.station-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .55rem;
    margin: 0;
}
.station-detail-extremes { margin-bottom: .7rem; }
.station-detail-metric {
    min-width: 0;
    padding: .7rem .75rem;
    border: 1px solid #e2e8f0;
    border-radius: .8rem;
    background: #f8fafc;
}
.station-detail-metric dt {
    color: #64748b;
    font-size: .67rem;
    font-weight: 800;
}
.station-detail-metric dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    margin: .2rem 0 0;
    color: #334155;
    font-size: 1rem;
    font-weight: 900;
}
.station-detail-metric dd small { color: #64748b; font-size: .65rem; }
.station-detail-metric.is-high dd { color: #dc2626; }
.station-detail-metric.is-low dd { color: #3b82f6; }
.station-detail-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: .08rem .38rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: .58rem;
    font-weight: 900;
}
.station-detail-badge-official { background: #dcfce7; color: #166534; }
.station-detail-badge-provisional { background: #ffedd5; color: #9a3412; }
.station-detail-more {
    margin-top: .75rem;
    border: 1px solid #e2e8f0;
    border-radius: .85rem;
    background: #fff;
}
.station-detail-more summary {
    padding: .8rem;
    color: #475569;
    font-size: .78rem;
    font-weight: 900;
    cursor: pointer;
}
.station-detail-more .station-detail-grid { padding: 0 .7rem .7rem; }
.station-detail-note {
    margin: .75rem 0;
    color: #64748b;
    font-size: .66rem;
    line-height: 1.55;
}
.station-detail-jma {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: .7rem 1rem;
    border-radius: .85rem;
    background: #f97316;
    color: #fff;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
}
.station-detail-jma:hover,
.station-detail-jma:focus-visible { background: #ea580c; outline: none; }

@media (min-width: 1024px) {
    .station-detail-backdrop { background: rgba(15,23,42,.24); }
    .station-detail-sheet {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(420px, 38vw);
        max-height: none;
        padding: 1.25rem;
        border-radius: 0;
        transform: translateX(102%);
        box-shadow: -18px 0 50px rgba(15,23,42,.2);
    }
    .station-detail-sheet[data-open="true"] { transform: translateX(0); }
}

@media (max-width: 767px) {
    .ranking-station-actions {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 2.75rem;
    }
    .station-detail-trigger { max-width: none; }
    .map-controls { right: .5rem; bottom: .5rem; max-width: calc(100% - 1rem); }
    .map-controls button { min-width: 2.35rem; min-height: 2.35rem; padding: .35rem .5rem; font-size: .68rem; }
}
.station-detail-loading {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #64748b;
    text-align: center;
}
.station-detail-loading strong { color: #334155; font-size: 1.15rem; }
.station-detail-loading span { font-size: .78rem; font-weight: 700; }

/* 画面外の独立セクションだけを遅延レイアウトする。表行・sticky・fixed領域には適用しない。 */
@supports (content-visibility: auto) {
    .render-deferred-section {
        content-visibility: auto;
        contain-intrinsic-size: auto 360px;
    }
    .render-deferred-map { contain-intrinsic-size: auto 560px; }
    .render-deferred-small { contain-intrinsic-size: auto 180px; }
}

/* KION v5.0.0β: seasonal, neutral, and color-vision-friendly themes */
:root {
    color-scheme: light;
    --kion-page: #fff7ed;
    --kion-page-accent: rgba(249, 115, 22, .12);
    --kion-surface: #ffffff;
    --kion-surface-muted: #f8fafc;
    --kion-surface-strong: #f1f5f9;
    --kion-border: #e5e7eb;
    --kion-text: #1f2937;
    --kion-text-muted: #64748b;
    --kion-accent: #f97316;
    --kion-accent-strong: #ea580c;
    --kion-accent-soft: #fff7ed;
    --kion-focus: rgba(249, 115, 22, .28);
    --kion-shadow: rgba(15, 23, 42, .08);
}

html[data-theme="normal"] {
    --color-brand-50: #f8fafc;
    --color-brand-100: #f1f5f9;
    --color-brand-200: #e2e8f0;
    --color-brand-400: #64748b;
    --color-brand-500: #334155;
    --color-brand-600: #1e293b;
    --kion-page: #ffffff;
    --kion-page-accent: rgba(148, 163, 184, .08);
    --kion-surface: #ffffff;
    --kion-surface-muted: #f8fafc;
    --kion-surface-strong: #f1f5f9;
    --kion-border: #e2e8f0;
    --kion-text: #1f2937;
    --kion-text-muted: #64748b;
    --kion-accent: #334155;
    --kion-accent-strong: #1e293b;
    --kion-accent-soft: #f1f5f9;
    --kion-focus: rgba(51, 65, 85, .24);
    --kion-shadow: rgba(15, 23, 42, .06);
}

html[data-theme="spring"] {
    --color-brand-50: #fff1f7;
    --color-brand-100: #ffe4ef;
    --color-brand-200: #fecddf;
    --color-brand-400: #f472b6;
    --color-brand-500: #ec4899;
    --color-brand-600: #be185d;
    --kion-page: #fff7fb;
    --kion-page-accent: rgba(74, 174, 100, .13);
    --kion-surface: #fffefe;
    --kion-surface-muted: #fff1f7;
    --kion-surface-strong: #edf9ef;
    --kion-border: #f3c8da;
    --kion-text: #3f3340;
    --kion-text-muted: #756170;
    --kion-accent: #ec4899;
    --kion-accent-strong: #be185d;
    --kion-accent-soft: #fff1f7;
    --kion-focus: rgba(236, 72, 153, .26);
    --kion-shadow: rgba(111, 57, 85, .09);
}

html[data-theme="summer"] {
    --color-brand-50: #fff7ed;
    --color-brand-100: #ffedd5;
    --color-brand-200: #fed7aa;
    --color-brand-400: #fb923c;
    --color-brand-500: #f97316;
    --color-brand-600: #ea580c;
    --kion-page: #fff8f0;
    --kion-page-accent: rgba(14, 165, 233, .10);
    --kion-surface: #ffffff;
    --kion-surface-muted: #fffaf5;
    --kion-surface-strong: #f1f8fb;
    --kion-border: #f0d9c4;
    --kion-text: #1f2937;
    --kion-text-muted: #64748b;
    --kion-accent: #f97316;
    --kion-accent-strong: #ea580c;
    --kion-accent-soft: #fff7ed;
    --kion-focus: rgba(249, 115, 22, .28);
    --kion-shadow: rgba(15, 23, 42, .08);
}

html[data-theme="autumn"] {
    --color-brand-50: #faf5ed;
    --color-brand-100: #f2e5d4;
    --color-brand-200: #e2c7a7;
    --color-brand-400: #b77946;
    --color-brand-500: #9a5b32;
    --color-brand-600: #744126;
    --kion-page: #f8f2e8;
    --kion-page-accent: rgba(112, 128, 72, .14);
    --kion-surface: #fffdf8;
    --kion-surface-muted: #f7efe3;
    --kion-surface-strong: #e9eadb;
    --kion-border: #d8c6ae;
    --kion-text: #3c332a;
    --kion-text-muted: #6f6256;
    --kion-accent: #9a5b32;
    --kion-accent-strong: #744126;
    --kion-accent-soft: #f4e8d8;
    --kion-focus: rgba(154, 91, 50, .28);
    --kion-shadow: rgba(70, 49, 32, .10);
}

html[data-theme="winter"] {
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-400: #60a5fa;
    --color-brand-500: #2563eb;
    --color-brand-600: #1d4ed8;
    --kion-page: #f3f8ff;
    --kion-page-accent: rgba(59, 130, 246, .12);
    --kion-surface: #ffffff;
    --kion-surface-muted: #f0f7ff;
    --kion-surface-strong: #e6f0fb;
    --kion-border: #cbdcf0;
    --kion-text: #1e293b;
    --kion-text-muted: #586b83;
    --kion-accent: #2563eb;
    --kion-accent-strong: #1d4ed8;
    --kion-accent-soft: #eff6ff;
    --kion-focus: rgba(37, 99, 235, .28);
    --kion-shadow: rgba(30, 64, 175, .09);
}

html[data-theme="accessible"] {
    --color-brand-50: #eaf6fb;
    --color-brand-100: #d5edf7;
    --color-brand-200: #a9d9ec;
    --color-brand-400: #2b8cbe;
    --color-brand-500: #0072b2;
    --color-brand-600: #005b8f;
    --kion-page: #f7f9fa;
    --kion-page-accent: rgba(0, 114, 178, .12);
    --kion-surface: #ffffff;
    --kion-surface-muted: #f1f5f7;
    --kion-surface-strong: #e5eef2;
    --kion-border: #7a8a93;
    --kion-text: #111827;
    --kion-text-muted: #374151;
    --kion-accent: #0072b2;
    --kion-accent-strong: #005b8f;
    --kion-accent-soft: #eaf6fb;
    --kion-focus: rgba(230, 159, 0, .55);
    --kion-shadow: rgba(17, 24, 39, .14);
}

html,
body {
    min-height: 100%;
    background: var(--kion-page);
}

body {
    color: var(--kion-text);
    background-image:
        radial-gradient(circle at 12% 4%, var(--kion-page-accent), transparent 30rem),
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--kion-accent-soft) 62%, transparent), transparent 28rem);
    background-attachment: fixed;
    transition: background-color .2s ease, color .2s ease;
}

.theme-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: -.25rem auto .75rem;
    padding: .32rem .45rem .32rem .65rem;
    border: 1px solid var(--kion-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--kion-surface) 94%, transparent);
    box-shadow: 0 2px 8px var(--kion-shadow);
    color: var(--kion-text-muted);
    backdrop-filter: blur(8px);
}
.theme-toolbar-icon {
    min-width: 1.5rem;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}
.theme-toolbar-label {
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}
.theme-select-wrap { position: relative; display: inline-flex; align-items: center; }
.theme-select {
    min-height: 2rem;
    max-width: 9.5rem;
    padding: .28rem 1.8rem .28rem .7rem;
    border: 1px solid var(--kion-border);
    border-radius: 999px;
    background: var(--kion-surface);
    color: var(--kion-text);
    font-size: .74rem;
    font-weight: 800;
    cursor: pointer;
    outline: none;
    appearance: none;
}
.theme-select:hover { border-color: var(--kion-accent); }
.theme-select:focus-visible {
    border-color: var(--kion-accent);
    box-shadow: 0 0 0 3px var(--kion-focus);
}
.theme-select-arrow {
    position: absolute;
    right: .55rem;
    width: .85rem;
    height: .85rem;
    color: var(--kion-accent);
    pointer-events: none;
}

html[data-theme] .smart-filter-card,
html[data-theme] .smart-filter-search input,
html[data-theme] .smart-mobile-filter-button,
html[data-theme] .smart-danger-toggle,
html[data-theme] .smart-select,
html[data-theme] .ranking-table,
html[data-theme] .metric-description-body,
html[data-theme] .affiliate-slot,
html[data-theme] .station-detail-sheet,
html[data-theme] .station-detail-card,
html[data-theme] details.bg-white,
html[data-theme] .bg-white {
    background-color: var(--kion-surface);
    border-color: var(--kion-border);
}

html[data-theme] .smart-sort-group,
html[data-theme] .smart-sheet-close,
html[data-theme] .map-stage,
html[data-theme] .station-detail-grid,
html[data-theme] .bg-gray-50,
html[data-theme] .bg-gray-100,
html[data-theme] .bg-slate-100 {
    background-color: var(--kion-surface-strong);
}

html[data-theme] .ranking-quick-filter {
    border-color: var(--kion-border);
    background: color-mix(in srgb, var(--kion-surface) 95%, transparent);
    box-shadow: 0 2px 8px var(--kion-shadow);
}

html[data-theme] .ranking-table th,
html[data-theme] .ranking-table tbody tr:hover td,
html[data-theme] .ranking-affiliate-row td,
html[data-theme] .ranking-affiliate-row:hover td {
    background-color: var(--kion-surface-muted) !important;
}

html[data-theme] .ranking-table td,
html[data-theme] .ranking-table th,
html[data-theme] .smart-filter-footer,
html[data-theme] .border-gray-100,
html[data-theme] .border-gray-200,
html[data-theme] .border-gray-300 {
    border-color: var(--kion-border);
}

html[data-theme] .text-gray-800,
html[data-theme] .text-gray-700 { color: var(--kion-text); }
html[data-theme] .text-gray-600,
html[data-theme] .text-gray-500,
html[data-theme] .text-gray-400 { color: var(--kion-text-muted); }

html[data-theme] .smart-filter-title,
html[data-theme] .smart-filter-search input,
html[data-theme] .smart-select,
html[data-theme] .theme-select { color: var(--kion-text); }
html[data-theme] .smart-filter-clear,
html[data-theme] .smart-filter-sort-label,
html[data-theme] .smart-filter-field > span,
html[data-theme] .smart-result-summary { color: var(--kion-text-muted); }
html[data-theme] .smart-filter-clear:hover,
html[data-theme] .smart-mobile-filter-button strong,
html[data-theme] .smart-select-arrow { color: var(--kion-accent-strong); }
html[data-theme] .smart-filter-search input:focus,
html[data-theme] .smart-select:focus {
    border-color: var(--kion-accent);
    box-shadow: 0 0 0 3px var(--kion-focus);
}
html[data-theme] .smart-sort-button[aria-pressed="true"] {
    background: var(--kion-accent-soft);
    color: var(--kion-accent-strong);
}
html[data-theme] .smart-sheet-apply { background: var(--kion-accent); }
html[data-theme] .smart-sheet-apply:hover { background: var(--kion-accent-strong); }
html[data-theme] :focus-visible { outline-color: var(--kion-accent); }

.map-legend-swatch {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-right: .25rem;
    border: 1px solid rgba(15, 23, 42, .35);
    border-radius: .125rem;
    background: var(--legend-color);
    flex: 0 0 auto;
}

html[data-theme="accessible"] .map-legend-swatch {
    border: 2px solid #111827;
    background-color: var(--legend-color);
    background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,255,255,.58) 3px 5px);
}
html[data-theme="accessible"] .map-legend-level-0 { border-radius: 50%; }
html[data-theme="accessible"] .map-legend-level-1 { transform: rotate(45deg) scale(.82); border-radius: 0; }
html[data-theme="accessible"] .map-legend-level-2 { border-radius: 0; }
html[data-theme="accessible"] .map-legend-level-3 { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
html[data-theme="accessible"] .map-legend-level-4 { border-radius: 999px; width: .9rem; }
html[data-theme="accessible"] .map-legend-level-5 { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
html[data-theme="accessible"] .map-legend-level-6 { border-radius: 50% 0 50% 0; }

html[data-theme="accessible"] .ranking-table .ranking-name-warning td.ranking-cell-name {
    background-color: #f0e442;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 5px, transparent 5px 10px);
    color: #111827;
}
html[data-theme="accessible"] .ranking-table .ranking-name-severe td.ranking-cell-name {
    background-color: #e69f00;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.42) 0 4px, transparent 4px 8px);
    color: #111827;
}
html[data-theme="accessible"] .ranking-table .ranking-name-danger td.ranking-cell-name {
    background-color: #cc79a7;
    background-image: radial-gradient(rgba(255,255,255,.72) 1px, transparent 1px);
    background-size: 6px 6px;
    color: #111827;
}
html[data-theme="accessible"] .smart-danger-toggle[aria-pressed="true"],
html[data-theme="accessible"] .ranking-quick-danger[aria-pressed="true"] {
    border: 2px solid #111827;
    background: #eaf6fb;
    color: #005b8f;
    box-shadow: inset 0 0 0 2px #e69f00;
}
html[data-theme="accessible"] .bg-red-600 { background-color: #d55e00; }
html[data-theme="accessible"] .bg-red-700 { background-color: #9f4100; }
html[data-theme="accessible"] .border-red-700 { border-color: #111827; }
html[data-theme="accessible"] .text-orange-500 { color: #d55e00; }
html[data-theme="accessible"] button:focus-visible,
html[data-theme="accessible"] a:focus-visible,
html[data-theme="accessible"] summary:focus-visible,
html[data-theme="accessible"] select:focus-visible,
html[data-theme="accessible"] input:focus-visible {
    outline: 3px solid #e69f00 !important;
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .theme-toolbar { margin-top: 0; }
    .theme-toolbar-label { display: none; }
    .theme-select { max-width: 8.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}

/* KION v5.0.0β: compact display settings and language switcher */
.display-settings-cluster {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 46;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .65rem;
}
.display-settings-fab {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--kion-border, #e5e7eb);
    background: var(--kion-card, #fff);
    color: var(--kion-accent-strong, #ea580c);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
    transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
}
.display-settings-fab:hover { transform: translateY(-1px); background: var(--kion-card-soft, #fff7ed); }
.display-settings-fab:active { transform: translateY(0) scale(.97); }
.display-settings-fab svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.display-settings-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + .75rem);
    width: min(20rem, calc(100vw - 2rem));
    max-height: min(34rem, calc(100vh - 7rem));
    overflow: auto;
    border: 1px solid var(--kion-border, #e5e7eb);
    border-radius: 1rem;
    background: var(--kion-card, #fff);
    color: var(--kion-text, #1f2937);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .24);
    padding: .7rem;
    transform-origin: bottom right;
}
.display-settings-popover[data-open="true"] { animation: kion-settings-in .16s ease-out; }
@keyframes kion-settings-in { from { opacity: 0; transform: translateY(.35rem) scale(.97); } to { opacity: 1; transform: none; } }
.display-settings-title { padding: .55rem .65rem .7rem; font-size: .9rem; font-weight: 900; color: var(--kion-text-muted, #64748b); }
.display-settings-row, .display-settings-option, .display-settings-back {
    width: 100%;
    min-height: 2.9rem;
    display: grid;
    align-items: center;
    gap: .65rem;
    border-radius: .75rem;
    text-align: left;
    font-weight: 800;
}
.display-settings-row { grid-template-columns: 1.7rem minmax(0, 1fr) auto auto; padding: .55rem .65rem; }
.display-settings-row:hover, .display-settings-option:hover, .display-settings-back:hover { background: var(--kion-card-soft, #f8fafc); }
.display-settings-row-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 900; }
.display-settings-current { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--kion-text-muted, #64748b); font-size: .78rem; font-weight: 700; }
.display-settings-back { grid-template-columns: 1.2rem minmax(0, 1fr); padding: .5rem .55rem .65rem; border-bottom: 1px solid var(--kion-border, #e5e7eb); border-radius: .65rem .65rem 0 0; }
.display-settings-options { display: grid; gap: .15rem; padding-top: .4rem; }
.display-settings-option { grid-template-columns: 1.2rem 1.8rem minmax(0, 1fr); padding: .5rem .65rem; }
.display-settings-option [data-option-check] { color: var(--kion-accent-strong, #ea580c); font-weight: 1000; }
.display-settings-option.is-selected { background: var(--kion-accent-soft, #fff7ed); color: var(--kion-accent-strong, #c2410c); }
html[data-theme="accessible"] .display-settings-option.is-selected { outline: 2px solid var(--kion-focus, #0072b2); outline-offset: -2px; }
@media (min-width: 640px) {
    .display-settings-cluster { right: max(2rem, env(safe-area-inset-right)); bottom: max(2rem, env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
    .display-settings-popover { width: min(19rem, calc(100vw - 1.25rem)); }
}

/* KION v5.0.0β r6: privacy-preserving location diagnostics */
.location-diagnostics-panel { padding: .35rem .35rem .15rem; }
.location-diagnostics-description, .location-diagnostics-privacy {
    margin: .35rem .3rem .65rem;
    color: var(--kion-text-muted, #64748b);
    font-size: .78rem;
    line-height: 1.55;
}
.location-diagnostics-grid { display: grid; gap: .4rem; }
.location-diagnostics-grid > div {
    display: grid;
    grid-template-columns: minmax(7.2rem, .9fr) minmax(0, 1.1fr);
    gap: .6rem;
    align-items: start;
    padding: .48rem .55rem;
    border: 1px solid var(--kion-border, #e5e7eb);
    border-radius: .65rem;
    background: var(--kion-card-soft, #f8fafc);
}
.location-diagnostics-grid dt { color: var(--kion-text-muted, #64748b); font-size: .74rem; font-weight: 800; }
.location-diagnostics-grid dd { margin: 0; text-align: right; font-size: .76rem; font-weight: 850; overflow-wrap: anywhere; }
.location-diagnostics-grid dd[data-state="good"] { color: #047857; }
.location-diagnostics-grid dd[data-state="warn"] { color: #b45309; }
.location-diagnostics-grid dd[data-state="bad"] { color: #b91c1c; }
html[data-theme="accessible"] .location-diagnostics-grid dd[data-state="good"] { color: #0072b2; text-decoration: underline; text-decoration-thickness: 2px; }
html[data-theme="accessible"] .location-diagnostics-grid dd[data-state="warn"] { color: #9f4100; border-left: 3px solid #e69f00; padding-left: .35rem; }
html[data-theme="accessible"] .location-diagnostics-grid dd[data-state="bad"] { color: #9f4100; border-left: 3px double #111827; padding-left: .35rem; }
.location-diagnostics-wide { grid-template-columns: 1fr !important; gap: .25rem !important; }
.location-diagnostics-wide dd { text-align: left; }
.location-diagnostics-browser { max-height: 5rem; overflow: auto; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .68rem !important; font-weight: 650 !important; }
.location-diagnostics-actions { display: grid; gap: .4rem; margin: .7rem .3rem .25rem; }
.location-diagnostics-button {
    min-height: 2.55rem;
    border: 1px solid var(--kion-border, #d1d5db);
    border-radius: .7rem;
    background: var(--kion-card, #fff);
    color: var(--kion-text, #1f2937);
    font-size: .78rem;
    font-weight: 850;
}
.location-diagnostics-button:hover { background: var(--kion-card-soft, #f8fafc); }
.location-diagnostics-button-primary { border-color: var(--kion-accent, #f97316); background: var(--kion-accent, #f97316); color: #fff; }
.location-diagnostics-button-primary:hover { background: var(--kion-accent-strong, #ea580c); }
.location-diagnostics-button:disabled { cursor: wait; opacity: .6; }
.location-diagnostics-copy-status { min-height: 1.2rem; margin: .2rem .3rem 0; color: var(--kion-text-muted, #64748b); font-size: .72rem; font-weight: 750; text-align: center; }
@media (max-width: 380px) {
    .location-diagnostics-grid > div { grid-template-columns: 1fr; gap: .2rem; }
    .location-diagnostics-grid dd { text-align: left; }
}

/* KION v5.0.0β r8: calendar-season temperature summaries and ticker */
.seasonal-ticker-panel[data-mode="heat"] {
    background: #dc2626;
    border-color: #b91c1c;
}
.seasonal-ticker-panel[data-mode="heat"] .seasonal-ticker-label {
    background: #b91c1c;
}
.seasonal-ticker-panel[data-mode="heat"] .seasonal-ticker-station {
    color: #dc2626;
}
.seasonal-ticker-panel[data-mode="heat"] .seasonal-ticker-time {
    color: #fecaca;
}
.seasonal-ticker-panel[data-mode="winter"] {
    background: #2563eb;
    border-color: #1e40af;
}
.seasonal-ticker-panel[data-mode="winter"] .seasonal-ticker-label {
    background: #1e40af;
}
.seasonal-ticker-panel[data-mode="winter"] .seasonal-ticker-station {
    color: #1d4ed8;
}
.seasonal-ticker-panel[data-mode="winter"] .seasonal-ticker-time {
    color: #dbeafe;
}
html[data-theme="accessible"] .seasonal-ticker-panel[data-mode="heat"] {
    background: #d55e00;
    border-color: #111827;
}
html[data-theme="accessible"] .seasonal-ticker-panel[data-mode="heat"] .seasonal-ticker-label {
    background: #9f4100;
}
html[data-theme="accessible"] .seasonal-ticker-panel[data-mode="winter"] {
    background: #0072b2;
    border-color: #111827;
}
html[data-theme="accessible"] .seasonal-ticker-panel[data-mode="winter"] .seasonal-ticker-label {
    background: #1b365d;
}
html[data-theme="accessible"] .map-legend-level-7 {
    border-radius: 0;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 93%, 50% 71%, 21% 93%, 32% 56%, 2% 35%, 39% 35%);
}

/* KION v5.2.1-hotfix3: seasonal Cool Share / Warm Share presentation */
#cool-share-container {
    --share-accent: #2563eb;
    --share-accent-strong: #1d4ed8;
    --share-soft: #eff6ff;
    --share-soft-strong: #dbeafe;
    --share-border: #dbeafe;
}
#cool-share-container[data-share-mode="warm"] {
    --share-accent: #ea580c;
    --share-accent-strong: #c2410c;
    --share-soft: #fff7ed;
    --share-soft-strong: #ffedd5;
    --share-border: #fed7aa;
}
.cool-share-summary,
.cool-share-chevron { color: var(--share-accent); }
.cool-share-radius {
    color: var(--share-accent);
    background: var(--share-soft);
}
.share-empty,
.share-spot-card,
.share-more-summary {
    border: 1px solid var(--share-border);
    background: var(--share-soft);
}
.share-spot-card[data-share-mode="warm"] {
    --share-accent: #ea580c;
    --share-accent-strong: #c2410c;
    --share-soft: #fff7ed;
    --share-soft-strong: #ffedd5;
    --share-border: #fed7aa;
}
.share-spot-card[data-share-mode="cool"] {
    --share-accent: #2563eb;
    --share-accent-strong: #1d4ed8;
    --share-soft: #eff6ff;
    --share-soft-strong: #dbeafe;
    --share-border: #dbeafe;
}
.share-spot-link,
.share-source-link,
.share-distance,
.share-more-summary { color: var(--share-accent); }
.share-spot-link:hover { color: var(--share-accent-strong); }
.share-role-badge {
    color: var(--share-accent-strong);
    background: var(--share-soft-strong);
}
.share-more-summary:hover { background: var(--share-soft-strong); }
html[data-theme="accessible"] #cool-share-container,
html[data-theme="accessible"] .share-spot-card {
    --share-accent: #0072b2;
    --share-accent-strong: #005b8f;
    --share-border: #0072b2;
}
html[data-theme="accessible"] #cool-share-container[data-share-mode="warm"],
html[data-theme="accessible"] .share-spot-card[data-share-mode="warm"] {
    --share-accent: #d55e00;
    --share-accent-strong: #9f4100;
    --share-border: #d55e00;
}