@layer components{.zone-heat-map{--zhm-turf: #0f0b1f;--zhm-line: rgb(255 255 255 / 28%);--zhm-good: var(--brand-mint);--zhm-mid: #ffd60a;--zhm-bad: #ff453a;--zhm-neutral: rgb(255 255 255 / 45%);margin:0;color:var(--color-white)}.zone-heat-map .field{position:relative;height:clamp(260px,52vw,420px);border-inline:3px solid var(--zhm-line);border-radius:var(--radius-md, 8px);background:var(--zhm-turf);overflow:hidden}.zone-heat-map .markings{position:absolute;inset:0;pointer-events:none}.zone-heat-map .hash{position:absolute;top:0;bottom:0;width:3px;background-image:repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.16) 0 5px, transparent 5px 16px)}.zone-heat-map .hash.left{left:38%}.zone-heat-map .hash.right{left:62%}.zone-heat-map .los{position:absolute;top:86%;right:0;left:0;height:2px;background:hsla(0,0%,100%,.4)}.zone-heat-map .los span{position:absolute;top:6px;right:9px;font-size:10px;font-weight:600;letter-spacing:.1em;color:hsla(0,0%,100%,.55)}.zone-heat-map .cells{position:absolute;top:0;right:0;left:0;display:grid;grid-template-rows:repeat(var(--rows), 1fr);grid-template-columns:repeat(var(--columns), 1fr);height:86%}.zone-heat-map .cell{container-type:inline-size;position:relative;display:flex;flex-direction:column;min-width:0;align-items:center;justify-content:center;gap:3px;border:1px dashed hsla(0,0%,100%,.09);overflow:hidden;text-align:center;--tier-color: var(--zhm-neutral)}.zone-heat-map .cell[data-tier=good]{--tier-color: var(--zhm-good)}.zone-heat-map .cell[data-tier=mid]{--tier-color: var(--zhm-mid)}.zone-heat-map .cell[data-tier=bad]{--tier-color: var(--zhm-bad)}.zone-heat-map .cell[data-tier]{background:radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--tier-color) 18%, transparent) 0%, transparent 72%)}.zone-heat-map .cell.low{background:repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px)}.zone-heat-map .cell.low .value,.zone-heat-map .cell.low .glow,.zone-heat-map .cell.low .caption{opacity:.55}.zone-heat-map .glow{position:absolute;top:50%;left:50%;width:calc(40px + 120px*var(--glow, 0));height:calc(40px + 120px*var(--glow, 0));transform:translate(-50%, -50%);border-radius:50%;background:radial-gradient(closest-side, color-mix(in srgb, var(--tier-color) calc(16% + 59% * var(--glow, 0)), transparent) 0%, color-mix(in srgb, var(--tier-color) calc(4% + 27% * var(--glow, 0)), transparent) 45%, transparent 100%);filter:blur(10px);pointer-events:none}.zone-heat-map .zone,.zone-heat-map .value,.zone-heat-map .caption,.zone-heat-map .detail{position:relative;white-space:nowrap}.zone-heat-map .zone{font-size:clamp(8px,7cqw,11px);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:hsla(0,0%,100%,.6)}.zone-heat-map .value{font-size:clamp(14px,15cqw,24px);font-weight:600;font-variant-numeric:tabular-nums;text-shadow:0 0 16px color-mix(in srgb, var(--tier-color) 40%, transparent),0 1px 5px rgba(0,0,0,.8)}.zone-heat-map .caption,.zone-heat-map .detail{font-size:clamp(9px,8cqw,12px);font-variant-numeric:tabular-nums;color:hsla(0,0%,100%,.72)}.zone-heat-map .axis{display:grid;grid-template-columns:repeat(auto-fit, minmax(0, 1fr));margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-align:center;text-transform:uppercase;color:var(--color-text-secondary, rgba(255, 255, 255, 0.6))}.zone-heat-map.run .hash{display:none}.zone-heat-map.run .cell{border:none}.zone-heat-map.run .cell:nth-child(1){clip-path:polygon(0 0, 100% 0, 100% 100%, 55% 100%)}.zone-heat-map.run .cell:nth-child(2){clip-path:polygon(0 0, 100% 0, 85% 100%, 15% 100%)}.zone-heat-map.run .cell:nth-child(3){clip-path:polygon(0 0, 100% 0, 45% 100%, 0 100%)}.zone-heat-map.run .carrier{position:absolute;top:93%;left:50%;width:14px;height:14px;transform:translate(-50%, -50%);border:2px solid var(--color-white);border-radius:50%;background:var(--zhm-good)}}