.pf-page {--pf-sea: #D7ECF7;--pf-land: #F6F1E7;--pf-land-line: #FFFFFF;--pf-l1: #CFE8F5;--pf-l2: #8FCBEA;--pf-l3: #4AA8D8;--pf-l4: #1A79B2;--pf-l5: #0B5A8A;--pf-dot: #7048E8;--pf-dot-edge: #FFFFFF;--pf-dot-w: 1.5;--pf-hero1: #0B5A8A;--pf-hero2: #1572A8;--pf-accent: #0E78A8;--pf-tint: #E4F0F8;--pf-ink: #0F2A44;--pf-muted: #4A5D72;--pf-line: #D6E3EC}
.ad-page.pf-page {--ad-primary: var(--pf-accent);--ad-primary2: var(--pf-hero2);--ad-tint: var(--pf-tint);--ad-line: var(--pf-line);--ad-h1: var(--pf-l1);--ad-h2: var(--pf-l2);--ad-h3: var(--pf-l3);--ad-h4: var(--pf-l4);--ad-h5: var(--pf-l5)}
body.areas-page {background: #F5F8FA}
.pf-ico {flex: none;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round}
.ad-page.pf-page .ad-band {padding: 36px 24px 84px;background: linear-gradient(135deg, var(--pf-hero1) 0%, var(--pf-hero1) 45%, var(--pf-hero2) 100%)}
.pf-waves {position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none}
.ad-page.pf-page .ad-eyebrow {display: inline-flex;gap: 6px;align-items: center;letter-spacing: .1em}
.ad-page.pf-page .ad-band-chip--link {min-height: 44px;padding: 8px 16px;color: #FFFFFF;text-decoration: none}
.ad-page.pf-page .ad-band-chip--link:hover {background: rgba(255, 255, 255, .26)}
@media (min-width: 800px) {.ad-page.pf-page .ad-band {padding: 48px 40px 96px}}
.pf-meter {height: 6px;margin-top: 10px;overflow: hidden;border-radius: 999px;background: var(--pf-tint)}
.pf-meter i {display: block;height: 100%;border-radius: 999px;background: linear-gradient(90deg, var(--pf-l3), var(--pf-l5))}
.pf-tag {display: inline-flex;align-items: center;padding: 1px 10px;border-radius: 999px;background: var(--pf-tint);color: var(--pf-ink);font-size: 12px;font-weight: 500}
.pf-svg path,
.pf-svg circle {vector-effect: non-scaling-stroke}
.pf-mapgrid {display: grid;gap: 20px}
@media (min-width: 900px) {.pf-mapgrid {grid-template-columns: minmax(0, 1fr) 340px;align-items: start}}
.pf-mapcol {min-width: 0}
.pf-mapbox {position: relative;overflow: hidden;border: 1px solid var(--pf-line);border-radius: 14px;background: var(--pf-sea)}
.pf-stage {position: relative;max-height: 640px;aspect-ratio: 600 / 650}
.pf-mapbox[data-view="world"] .pf-stage {aspect-ratio: 2 / 1.3}
.pf-mapbox--detail .pf-stage {aspect-ratio: auto;height: 340px}
@media (min-width: 900px) {.pf-stage {aspect-ratio: auto;height: 600px}
.pf-mapbox[data-view="world"] .pf-stage {height: 420px}
.pf-mapbox--detail .pf-stage {height: 440px}}
.pf-svg {display: block;width: 100%;height: 100%;max-width: none}
.pf-land {fill: var(--pf-land);stroke: var(--pf-land-line);stroke-width: 1;stroke-linejoin: round;transition: fill .25s, stroke .25s}
.pf-land.pf-l1 { fill: var(--pf-l1); }
.pf-land.pf-l2 { fill: var(--pf-l2); }
.pf-land.pf-l3 { fill: var(--pf-l3); }
.pf-land.pf-l4 { fill: var(--pf-l4); }
.pf-land.pf-l5 { fill: var(--pf-l5); }
.pf-land.is-link {cursor: pointer}
.pf-land.is-hl,
.pf-land.is-link:hover {stroke: var(--pf-ink);stroke-width: 2}
.pf-land:focus {outline: none}
.pf-land:focus-visible {stroke: var(--pf-ink);stroke-width: 3}
.pf-hl {fill: none;stroke: var(--pf-ink);stroke-width: 2.2;stroke-linejoin: round;pointer-events: none}
.pf-land.pf-dim {fill: var(--pf-land);stroke-width: 1}
.pf-land.pf-target {fill: var(--pf-l2);stroke: var(--pf-l5);stroke-width: 2}
.pf-dots {pointer-events: none}
.pf-dot circle {transform-box: fill-box;transform-origin: center}
.pf-dot .core {fill: var(--pf-dot);stroke: var(--pf-dot-edge);stroke-width: var(--pf-dot-w);animation: pf-pop .4s cubic-bezier(.2, 1.6, .4, 1) both}
.pf-dot .ring {fill: none;stroke: var(--pf-dot);stroke-width: 1.6;opacity: 0;animation: pf-ring 1.2s ease-out both}
.pf-dots.is-static .pf-dot .core {animation: none}
@keyframes pf-pop {from { transform: scale(0); }
to { transform: scale(1); }}
@keyframes pf-ring {from { opacity: .9; transform: scale(1); }
to { opacity: 0; transform: scale(5); }}
@media (prefers-reduced-motion: reduce) {.pf-dot .core,
.pf-dot .ring {animation: none}
.pf-dot .ring {display: none}
.pf-land {transition: none}}
.pf-tip {position: absolute;top: 0;left: 0;z-index: 5;width: max-content;max-width: calc(100% - 16px);padding: 10px 12px;border-radius: 12px;background: var(--pf-ink);box-shadow: 0 8px 24px rgba(15, 42, 68, .3);color: #FFFFFF;font-size: 13px;line-height: 1.5;opacity: 0;pointer-events: none;visibility: hidden;transition: opacity .12s}
.pf-tip.is-on {opacity: 1;visibility: visible}
.pf-tip.is-touch {pointer-events: auto}
.pf-tip b {display: block;font-size: 15px}
.pf-tip span {display: block;color: #DCE6F0}
.pf-page .pf-tip-go {display: inline-flex;align-items: center;min-height: 44px;margin-top: 6px;padding: 6px 14px;border-radius: 999px;background: #FFFFFF;color: var(--pf-ink);font-size: 13px;font-weight: 700;text-decoration: none}
.pf-play {display: flex;gap: 10px;align-items: center;width: fit-content;max-width: calc(100% - 24px);margin: 10px 12px 12px auto;padding: 8px 8px 8px 14px;border-radius: 999px;background: rgba(255, 255, 255, .94);box-shadow: 0 2px 4px rgba(15, 42, 68, .1), 0 8px 24px rgba(15, 42, 68, .14);backdrop-filter: blur(6px)}
.pf-play-info {display: grid;gap: 4px;width: 140px;font-size: 12px;line-height: 1.3}
.pf-play-state {display: flex;flex-wrap: wrap;gap: 0 6px;align-items: baseline}
.pf-play-state b {font-size: 12px}
.pf-play-date {color: var(--pf-muted);font-variant-numeric: tabular-nums}
.pf-bar {height: 4px;overflow: hidden;border-radius: 999px;background: var(--pf-tint)}
.pf-bar i {display: block;width: 0;height: 100%;border-radius: 999px;background: var(--pf-accent)}
.pf-play-btn {display: inline-flex;flex: none;gap: 6px;align-items: center;justify-content: center;min-width: 44px;min-height: 44px;padding: 8px 12px;border: 0;border-radius: 999px;background: var(--pf-accent);color: #FFFFFF;font-size: 13px;font-weight: 700;white-space: nowrap}
.pf-play[data-state="playing"] .pf-play-btn,
.pf-play[data-state="paused"] .pf-play-btn {background: var(--pf-tint);color: var(--pf-ink)}
.pf-play-static {width: fit-content;max-width: calc(100% - 24px);margin: 10px 12px 12px auto;padding: 8px 14px;border-radius: 12px;background: rgba(255, 255, 255, .94);color: var(--pf-muted);font-size: 12px;line-height: 1.5}
@media (min-width: 900px) {.pf-play,
.pf-play-static {position: absolute;right: 12px;bottom: 12px;z-index: 4;margin: 0}
.pf-play-info {width: 150px}
.pf-play-btn {padding: 8px 14px}}
.pf-legend {display: flex;flex-wrap: wrap;gap: 8px 16px;align-items: center;padding: 10px 14px;border-top: 1px solid var(--pf-line);background: rgba(255, 255, 255, .85);color: var(--pf-muted);font-size: 12px}
@media (min-width: 900px) {.pf-legend {position: absolute;top: 12px;left: 12px;z-index: 3;max-width: 260px;padding: 10px 12px;border: 0;border-radius: 12px;box-shadow: 0 2px 4px rgba(15, 42, 68, .08), 0 6px 18px rgba(15, 42, 68, .1)}
.pf-mapbox[data-view="world"] .pf-legend {top: auto;bottom: 12px}}
.pf-legend-scale {display: grid;gap: 2px}
.pf-legend-title {color: var(--pf-ink);font-weight: 700}
.pf-legend-sw,
.pf-legend-ticks {display: grid;grid-template-columns: repeat(5, 36px);gap: 2px}
.pf-legend-sw i {height: 12px;border-radius: 3px}
.pf-legend-sw .pf-l1 { background: var(--pf-l1); }
.pf-legend-sw .pf-l2 { background: var(--pf-l2); }
.pf-legend-sw .pf-l3 { background: var(--pf-l3); }
.pf-legend-sw .pf-l4 { background: var(--pf-l4); }
.pf-legend-sw .pf-l5 { background: var(--pf-l5); }
.pf-legend-ticks {font-size: 10px;line-height: 1.2;text-align: center;font-variant-numeric: tabular-nums}
.pf-legend-item {display: inline-flex;gap: 6px;align-items: center}
.pf-legend-none {width: 22px;height: 12px;border: 1px solid var(--pf-land-line);border-radius: 3px;background: var(--pf-land);box-shadow: 0 0 0 1px var(--pf-line)}
.pf-legend-dot {width: 12px;height: 12px;border: 2px solid var(--pf-dot-edge);border-radius: 50%;background: var(--pf-dot);box-shadow: 0 0 0 1px var(--pf-dot)}
.pf-mapnote {display: flex;gap: 8px;align-items: flex-start;margin: 10px 0 0;color: var(--pf-muted);font-size: 12px;line-height: 1.6}
.pf-mapnote svg {flex: none;margin-top: 3px}
.pf-mapsrc {margin: 4px 0 0 22px;color: var(--pf-muted);font-size: 11px}
.pf-rank-head {display: flex;flex-wrap: wrap;gap: 4px 10px;align-items: baseline;justify-content: space-between;margin: 0 0 8px}
.pf-rank-head h3 {font-size: 16px}
.pf-rank-head span {color: var(--pf-muted);font-size: 12px}
.pf-rank {display: grid;gap: 2px;margin: 0;padding: 0;list-style: none}
.pf-rank-item {display: grid;grid-template-columns: 28px minmax(0, 1fr) auto;gap: 2px 10px;align-items: center;min-height: 52px;padding: 8px 10px;border-radius: 10px;color: var(--pf-ink);text-decoration: none}
.pf-rank-item:hover,
.pf-rank-item:focus-visible {background: var(--pf-tint)}
.pf-rk {display: grid;place-items: center;width: 28px;height: 28px;border: 1.5px solid #9DB6D1;border-radius: 50%;background: #FFFFFF;font-size: 13px;font-weight: 700;font-variant-numeric: tabular-nums}
.pf-rk--top {border-color: var(--pf-accent);background: var(--pf-accent);color: #FFFFFF}
.pf-rank-name b {display: block;font-size: 14px;line-height: 1.4}
.pf-rank-name small {display: block;overflow: hidden;color: var(--pf-muted);font-size: 12px;line-height: 1.4;white-space: nowrap;text-overflow: ellipsis}
.pf-rank-v {text-align: right;white-space: nowrap;font-variant-numeric: tabular-nums}
.pf-rank-v b {font-size: 17px}
.pf-rank-v small {margin-left: 2px;color: var(--pf-muted);font-size: 12px}
.pf-rank-bar {grid-column: 2 / 4;height: 5px;overflow: hidden;border-radius: 999px;background: var(--pf-tint)}
.pf-rank-bar i {display: block;height: 100%;border-radius: 999px;background: linear-gradient(90deg, var(--pf-l3), var(--pf-l4))}
.pf-more {display: flex;gap: 6px;align-items: center;justify-content: center;width: 100%;min-height: 48px;margin-top: 8px;border: 1px solid var(--pf-line);border-radius: 12px;background: #FFFFFF;color: var(--pf-ink);font-size: 14px;font-weight: 700}
.pf-more:hover {background: var(--pf-tint)}
.pf-more[aria-expanded="true"] .pf-ico {transform: rotate(180deg)}
.pf-more--pill {width: auto;min-width: 200px;padding: 10px 24px;border-color: var(--pf-accent);border-radius: 999px;color: var(--pf-accent)}
.pf-page .pf-more:focus-visible,
.pf-page .pf-play-btn:focus-visible,
.pf-page .pf-chip:focus-visible,
.pf-page .pf-rank-item:focus-visible,
.pf-page .pf-ac:focus-visible {outline: 3px solid var(--pf-accent);outline-offset: 2px}
.pf-chips {display: flex;gap: 8px;margin: 0 -16px 16px;padding: 2px 16px 6px;overflow-x: auto;scroll-snap-type: x proximity;scrollbar-width: none}
.pf-chips::-webkit-scrollbar {display: none}
@media (min-width: 900px) {.pf-chips {flex-wrap: wrap;margin: 0 0 16px;padding: 2px 0 6px;overflow: visible}}
.pf-page .pf-chip {display: inline-flex;flex: none;gap: 6px;align-items: center;min-height: 44px;padding: 6px 16px;border: 1px solid var(--pf-line);border-radius: 999px;background: #FFFFFF;color: var(--pf-ink);font-size: 14px;text-decoration: none;scroll-snap-align: start;white-space: nowrap}
.pf-chip small {color: var(--pf-muted);font-size: 12px;font-variant-numeric: tabular-nums}
.pf-page .pf-chip[aria-current="page"] {border-color: var(--pf-accent);background: var(--pf-accent);color: #FFFFFF;font-weight: 700}
.pf-chip[aria-current="page"] small {color: #FFFFFF}
.pf-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));grid-auto-rows: 1fr;gap: 16px}
.pf-grid-item:not([hidden]) {display: flex}
.pf-grid-item > .pf-ac {flex: 1;min-width: 0}
.pf-page .pf-ac {position: relative;display: flex;flex-direction: column;gap: 12px;padding: 20px 18px 16px;overflow: hidden;border-radius: var(--ad-r);background: #FFFFFF;box-shadow: var(--ad-sh);color: var(--pf-ink);text-decoration: none;transition: transform .2s, box-shadow .2s}
.pf-ac:hover {box-shadow: 0 2px 4px rgba(15, 42, 68, .08), 0 16px 32px rgba(15, 42, 68, .14);transform: translateY(-2px)}
.pf-tbar {position: absolute;top: 0;right: 0;left: 0;height: 4px;background: #9DB6D1}
.pf-tbar--up { background: #0E9F6E; }
.pf-tbar--down { background: #D64545; }
.pf-ac-top {display: flex;gap: 10px;align-items: flex-start}
.pf-ac-name {flex: 1}
.pf-ac h3 {font-size: 18px}
.pf-ac-region {color: var(--pf-muted);font-size: 12px}
.pf-ac-last {display: inline-flex;gap: 4px;align-items: center;color: var(--pf-muted);font-size: 12px;white-space: nowrap}
.pf-ac-mid {display: flex;gap: 12px;align-items: flex-end;justify-content: space-between}
.pf-ac-lbl {color: var(--pf-muted);font-size: 12px;line-height: 1.2}
.pf-ac-big {font-size: 32px;font-weight: 700;line-height: 1.1;font-variant-numeric: tabular-nums}
.pf-ac-big small {margin-left: 3px;color: var(--pf-muted);font-size: 13px;font-weight: 500}
.pf-ac-dl {margin-top: 2px;font-size: 13px}
.pf-spark {flex: 0 1 120px;min-width: 80px}
.pf-spark .ad-chart {height: 44px}
.pf-fishes {display: flex;flex-direction: column;gap: 6px;margin: 0;padding: 12px 0 0;border-top: 1px solid var(--pf-line);list-style: none}
.pf-fishes li {display: flex;gap: 10px;align-items: center;min-width: 0;font-size: 13px}
.pf-fishes .ad-thumb {flex: none;width: 32px;height: 32px}
.pf-fi-name {min-width: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.pf-fi-n {margin-left: auto;font-weight: 700;font-variant-numeric: tabular-nums;white-space: nowrap}
.pf-fi-n small {margin-left: 2px;color: var(--pf-muted);font-size: 12px;font-weight: 500}
.pf-ac-none {margin: 0;padding-top: 12px;border-top: 1px solid var(--pf-line);color: var(--pf-muted);font-size: 13px}
.pf-listmeta {display: flex;flex-wrap: wrap;gap: 8px 16px;align-items: center;justify-content: space-between;margin-top: 16px;color: var(--pf-muted);font-size: 13px}
.pf-foot {margin: 20px 0 0;padding: 14px;border-radius: 12px;background: var(--pf-tint);color: var(--pf-muted);font-size: 13px}
.pf-cross {display: flex;flex-wrap: wrap;gap: 12px 20px;align-items: center;justify-content: space-between;padding: 20px;border-radius: var(--ad-r);background: linear-gradient(135deg, var(--pf-tint), #FFFFFF);box-shadow: var(--ad-sh)}
.pf-cross p {flex: 1 1 280px;margin: 0;font-size: 14px}
.pf-cross b {display: block;font-size: 17px}
.ad-page.pf-page .pf-cross a {display: inline-flex;align-items: center;min-height: 48px;padding: 10px 22px;border-radius: 999px;background: var(--pf-accent);color: #FFFFFF;font-weight: 700;text-decoration: none}
@media (prefers-reduced-motion: reduce) {.pf-ac {transition: none}
.pf-ac:hover {transform: none}}