.p3{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;margin-top:36px;align-items:stretch}
.p3-stage{position:relative;height:600px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#bfe0f2 0%,#e6f1e2 62%,#d9e4cf 100%);box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.p3-c{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none;outline:0}
.p3-c:active{cursor:grabbing}
.p3-off .p3-c,.p3-off .p3-top .p3-views,.p3-off .p3-n{display:none}
.p3-top{position:absolute;left:14px;right:14px;top:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;pointer-events:none}
.p3-top>div{display:flex;gap:6px;background:rgba(255,255,255,.92);padding:5px;border-radius:999px;box-shadow:0 6px 20px -10px rgba(0,0,0,.5);pointer-events:auto}
.p3-top button{border:0;background:transparent;font:600 .82rem var(--body);color:var(--ink);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
.p3-top button:hover{background:var(--leaf)}
.p3-top button[aria-pressed=true]{background:var(--green);color:#fff}
.p3-legend{position:absolute;left:14px;bottom:14px;display:flex;flex-wrap:wrap;gap:6px 14px;background:rgba(255,255,255,.92);padding:9px 14px;border-radius:14px;font-size:.78rem;font-weight:600;color:var(--ink);max-width:calc(100% - 90px)}
.p3-legend span{display:inline-flex;align-items:center;gap:6px}
.p3-legend i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.p3-n{position:absolute;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--green);font-family:var(--head)}
.p3-n:before{content:"";position:absolute;top:-9px;left:50%;margin-left:-6px;border:6px solid transparent;border-bottom:10px solid #c0392b}
.p3-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);margin:0;background:rgba(20,32,27,.82);color:#fff;font-size:.8rem;padding:8px 16px;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .5s;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.p3-used .p3-hint{opacity:0}
.p3-off .p3-hint{white-space:normal;text-align:center;bottom:50%;transform:translate(-50%,50%)}
.p3-info{background:#fff;color:var(--ink);border-radius:22px;padding:24px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px;min-width:0}
.p3-info h3{margin:0;font-size:1.5rem;color:var(--ink)}
.p3-info p{margin:0;color:var(--muted);font-size:.95rem}
.p3-info .p3-big{font-size:1rem;color:var(--ink)}
.p3-info .p3-big b{font:600 2.3rem/1 var(--head);color:var(--green)}
.p3-info .p3-big small{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}
.p3-info label{font-weight:600;font-size:.86rem;margin-top:6px}
.p3-info select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
.p3-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.p3-st{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.p3-st.u{background:#bfe8b0;color:#17452f}
.p3-st.s{background:#a3a8ab;color:#fff}
.p3-back{align-self:flex-start;border:0;background:none;color:var(--green2);font:600 .86rem var(--body);cursor:pointer;padding:0}
.p3-dia{width:100%;height:auto;background:var(--sand);border-radius:14px}
.p3-dia polygon{stroke:#1d4a38;stroke-width:2;stroke-linejoin:round}
.p3-dia polygon.u{fill:#bfe8b0}
.p3-dia polygon.s{fill:#c9cdd0}
.p3-dia text{font:600 13px var(--body);fill:#14201b}
.p3-dia text.num{font:600 22px var(--head);fill:#1d4a38}
.p3-dl{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0}
.p3-dl div{background:#fff;padding:10px 12px}
.p3-dl dt{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.p3-dl dd{margin:2px 0 0;font-weight:700;font-size:1.05rem}
.p3-info .p3-note{font-size:.78rem}
.p3-info .btn{margin-top:auto;color:#1c1406}
.p3-info .btn-o{color:var(--ink)}
@media (max-width:980px){.p3{grid-template-columns:1fr}.p3-stage{height:62vh;min-height:380px}}
@media (max-width:640px){.p3-hint{bottom:auto;top:108px}.p3-top{left:10px;right:10px;top:10px}.p3-info{padding:20px}.p3-top button{padding:7px 10px;font-size:.76rem}.p3-hint{font-size:.72rem}.p3-legend{font-size:.72rem}}