/* Proximity principle lesson. All rules scoped under .prx-* */
.prx-hero img { width: 300px; max-width: 100%; max-height: 34vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.prx-bld { width: 100%; max-width: 360px; }
.prx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.prx-hall .prx-up { display: none; }
.prx-ground { stroke: var(--line-strong); stroke-width: 2; }
.prx-roof { fill: #2A2346; }
.prx-wall { fill: var(--raised); stroke: var(--line); stroke-width: 1; }
.prx-rail { stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; }
.prx-stairs { stroke: var(--violet-bright); stroke-width: 6; stroke-dasharray: 2 4; fill: none; }
.prx-door { fill: #3A3160; stroke: rgba(169,155,255,.55); stroke-width: 1.5; }
.prx-door.up { fill: #2E2850; }
.prx-num { fill: var(--text); font: 700 13px var(--sans); text-anchor: middle; }
.prx-low:first-child .prx-door { fill: rgba(252,192,80,.25); stroke: var(--gold); }
.prx-svg:not(.prx-hall) .prx-low:first-child .prx-door { fill: #3A3160; stroke: rgba(169,155,255,.55); }
.prx-svg:not(.prx-hall) .prx-you { display: none; }
.prx-you { fill: var(--gold); font: 700 13px var(--sans); text-anchor: middle; }
.prx-bar { fill: var(--mint); }
.prx-pct { fill: var(--mint); font: 700 14px var(--sans); text-anchor: middle; }
.prx-hot .prx-door { stroke: var(--gold); stroke-width: 2.5; }
.prx-win .prx-door { fill: rgba(63,214,154,.3); stroke: var(--mint); stroke-width: 3; }
.prx-pass { fill: var(--gold); font: 600 12px var(--sans); text-anchor: middle; }
.prx-walker { fill: var(--gold); stroke: #2A2216; stroke-width: 1.5; }
.prx-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 2px solid var(--line-strong); border-radius: 16px; background: var(--surface); }
.prx-card b { font: 700 18px var(--sans); color: var(--gold); }
.prx-card span { font: 500 15px var(--sans); color: var(--text); }
.prx-card.prx-done { border-color: var(--mint); }